title: get objects from a list populated by service in angular2
body: <p>I am new to angular2 and trying to do a very simple thing. I have a local json file and i am accessing it via http.get to get the data using a service. This service return a list of data and i want to access an object out of it and render on screen. I do not want to use ngFor because i have a Previous,Next feature and i want to push the object one-by-one on my user clicks into view. However my rendering fails and seems like "promoObj" in below codeis "undefined" and cannot figure out why. Below is my code - </p>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { TitleService } from '../services/services.intrests';
  import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
  import { Promo } from '../services/model';
  
  
  @Component({
      selector: 'promo-banners',
      templateUrl: 'src/components/promotion/promotion-template.html',
      styleUrls: ['./static/css/app.css']
  })
  export class PromotionWidget implements OnInit {
  
      promoList: Array&lt;Promo&gt;;
      promoObj: Promo;
  
  
  
      constructor(private titleSvc: TitleService) { }
  
      ngOnInit() {
          this.retrievePromotions();
          //I want to do something like this and push the first object in view when initialized
          this.promoObj = this.promoList[0];
  
      }
      retrievePromotions() {
          this.titleSvc.getTitle().subscribe(data =&gt; {
              this.promoList = data;
          });
  
      }
  
  
  }
  </code></pre>
  
  <p>In above code Promo is a class and contains attributes that are expected from json.</p>
  
  <p>Below is my service file
      <strong>service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import { Http, Response,Headers,RequestOptions } from '@angular/http';
  import { Observable } from 'rxjs/Rx';
  import 'rxjs/add/operator/map';
  @Injectable()
  
  export class TitleService {
      constructor(private http: Http) { }
  
      getTitle() {
          console.log("again");
          return this.http.get('./static/json/title.json').map((res: Response) =&gt; res.json());
      }
  
  }
  </code></pre>
  
  <p><strong>View.html</strong></p>
  
  <pre><code> &lt;div style="max-width: 30%;float: left;" class="promo-card"&gt;
          &lt;h2&gt;{{promoObj.title}}&lt;/h2&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>I know something silly i am doing but don't know what. Please help.</p>