Updating the collector component

To see a service in action, first let's update our previous wire-frame and modify the template. Let's say we need to see a list of news headlines which we can select among them and (later in Chapter 4, The Rating Service – Data Management) decide which ones have the higher value (rate) for investigation.

Showing a list of news headlines means we have to implement a mechanism which loops through the available items and displays them. Open the Collector component first and create new properties as follows:

// app/collector/collector.component.ts 
import {Component} from '@angular/core'; 
@Component({ 
  selector: 'sh-collector', 
  templateUrl: './collector.html' 
}) 
 
export class CollectorComponent { 
  caption = "Some news worth investigating"; 
  headlines  = [ 
    "Lorem ipsum dolor sit amet",  
    "consectetuer adipiscing elit",  
    "Integer tincidunt Cras dapibus&quot...