Updating the collector component

Now we have an observable object that gives us a JSON string that contains news items. The best way to collect these news items from the Collector service is by subscribing to the observable object and then passing the news array to the template.

Using the subscribe() function, we fetch the 'data' array and push it into our private property - headlines - for later access:

// app/collector/collector.component.ts 
//... 
export class CollectorComponent { 
  //.... 
  constructor (collectorService: CollectorService) { 
    collectorService.getHeadlines() 
      .subscribe( 
        data => { 
          this.headlines = data; 
        } 
      ); 
  } 
  //... 
} 

As we saw inside the service, the data is already mapped to an array of the news. So when we assign it to the headlines property, what we get in the template is an array of objects with various properties including link, title, and description:

item: [ 
  { 
    title:"Clinton 'extremely careless' but...