Angular Services - Quick and Dirty

Angular Services (Quick & Dirty)

Whenever I'm stubbing out an Angular site and need to setup formatting some results from a service call I'll use the code below.

//Services (Typescript file - actual service file)


//this code is a quick and dirty service with values hard coded in an array.

export class CoursesService {
        return ['course1','course2','course3']; 

//Services (Typescript file - component consuming the service's data)


/*the code below is the component that consumes the data from the courses service 
(from the code above)*/

import { CoursesService } from './../courses.service';
import { Component, OnInit } from '@angular/core';

  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
export class CoursesComponent implements OnInit {
  /*using dependency injection "inject" the CoursesService into the 
  constructor (creating an instance of the service)*/
  constructor(service: CoursesService) { 
    //make your call to the specific method needed = service.getCourses();
  ngOnInit() {}

<!--Services (HTML file to output the service calls response)-->


<!--the code below is the html that displays the service call's data response-->


<div style="text-align: left;">
    List of Courses:
        <li *ngFor="let course of courses">

Link your website to this page! Copy and paste the URL below: