<h5>Lista de cursos</h5>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
import { CursosService } from './cursos.service';
export class CursosComponent implements OnInit {
cursos: string[] = [];
cursosService: CursosService;
ou
//cursosService: CursosService;
constructor(_cursosService: CursosService) {
this.cursosService = _cursosService;
}
ou
constructor(private cursosService: CursosService) {
//this.cursosService = _cursosService;
}
ngOnInit() {
this.cursos = this.cursosService.getCursos();
}
}
import { Injectable } from '@angular/core';
// Decorator para injetar a classe
@Injectable()
export class CursosService {
getCursos() {
return ['Angular 2', 'Java', 'Phonegap'];
}
}
Lembrando que, a classe de serviço deverá ser informado no app.module dentro de providers: [].