How to update a div based on http.get request in Angular 2

Question

I have menu column in left side and content part in right side. whenever i click on menus in left side , http.get request is performed and i received response data but i dont know how to replace in content div. Thanks if anyone help me...

component ts

import {Component} from 'angular2/core';
import {Http} from "angular2/http";
import {HTTPTestService} from "./http-test.service";
import {HTTPSecondComponent} from "./http_second.component";
import {Observable} from 'rxjs/Rx';
@Component({
    selector: 'http-test',
    template: ` <div class="leftside">
      <ul> //left side menu iteration
               <li *ngFor="#item of getData?.items" (click)="getPosts()">  
                        <a href="#">{{item.name}} 
               </a>
               </li>   
      </ul>
            //content to display ======= where i struggle to update data
           <div *ngFor="#data of postData?.datas"> {{data.creation_date}}
            </div>
      </div>
     `,
       directives: [HTTPSecondComponent],
     providers:[HTTPTestService],
      styleUrls:["../src/css/http-style.css"]   
})
export class HTTPTestComponent {
    public getData;
    public postData;
    public displayName;
    public creationDate;
    constructor (private _httpService: HTTPTestService){}
     getStack()
      {
          this._httpService.getItemData()
         .subscribe(             
             data =>this.getData = (data),
                // console.log(this.httpData);},
             error => alert(error),
             () =>console.log("finished")
         );
     }
   getPosts(){

              this._httpService.getPostData()
         .subscribe(             
             data =>this.postData = (data),
                // console.log(this.httpData);},
             error => alert(error),
             () =>console.log("finished")
     );
   }
     ngOnInit() {
    this.getStack();
    this.getPosts();
  }
}

service ts

import {Injectable} from "angular2/core";
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';
@Injectable()
export class HTTPTestService {
    constructor(private _http: Http) { }
    getItemData(){
        return this._http.get('https://api.stackexchange.com/2.2/sites').map(res => res.json());
    }  
getPostData(){
    return this._http.get('https://api.stackexchange.com/2.2/posts?order=desc&sort=activity&site=stackoverflow').map(res=>res.json());
}
}

Receiving Data for content when i click menu link

    {
    "datas": [
        {
            "owner": {
                "reputation": 3589,
                "user_id": 1376277,
                "user_type": "registered",
                "accept_rate": 34,
                "profile_image": "https://www.gravatar.com/avatar/195fcc7db00488b207c67ccfee6a2c5b?s=128&d=identicon&r=PG",
                "display_name": "Rahul Gupta",
                "link": "http://stackoverflow.com/users/1376277/rahul-gupta"
            },
            "score": 1,
            "last_edit_date": 1483342788,
            "last_activity_date": 1483342788,
            "creation_date": 1423733190,
            "post_type": "question",
            "post_id": 28473725,
            "link": "http://stackoverflow.com/q/28473725"
        }
    ]
}

Answer 1

You have ngOnInit in your class. But it will not be executed unless it's not implemented by OnInit.

To use it properly (to be sure it'll be launched) you have to extend your class as implements OnInit. Change the first line of your class title like this:

export class HTTPTestComponent implements OnInit {

and add the OnInit to imports line like this:

import {Component, OnInit} from 'angular2/core';

And your functions getStack() and getPosts() will be executed at start