Angular

components/my.component.ts
Alternative approach to register application providers in application components. If we add providers at component
level whenever the component is rendered it will create a new instance of the service.
import { Component, OnInit } from '@angular/core';
import { MyService } from '../services/my.service';
@Component({
...
...
providers:[MyService] //
})
export class MyComponent implements OnInit {
data: any[];
// Creates private variable myService to use, of type MyService
constructor(private myService: MyService) { }
}
ngOnInit() {
this.data = this.myService.getData();
}
Section 23.2: Example with Promise.resolve
services/my.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
data: any = [1, 2, 3];
}
getData() {
return Promise.resolve(this.data);
}
getData() now acts likes a REST call that creates a Promise, which gets resolved immediately. The results can be
handheld inside .then() and errors can also be detected. This is good practice and convention for asynchronous
methods.
components/my.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from '../services/my.service';
@Component({...})
export class MyComponent implements OnInit {
data: any[];
// Creates private variable myService to use, of type MyService
constructor(private myService: MyService) { }
}
ngOnInit() {
// Uses an "arrow" function to set data
this.myService.getData().then(data => this.data = data);
}
GoalKicker.com – Angular 2 Notes for Professionals 99