Angular 2 Web API calling Get

Question

I am calling a Get API from angular 2 it Sends the data in this Format bellow.I need to show picture(large) from this result how can i Do this.

image Get Request Response

here is my Admin.component.ts class code

Component

import {Component} from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS,RouteDefinition, Router} from '@angular/router-deprecated';
import {LoginComponent} from '../components/login.component';
import {Observable} from 'rxjs/Rx';

import {Http, Headers} from '@angular/http';
@Component({
    templateUrl:'../../app/layouts/admin.html',
    selector:'Admin',
    directives: [ROUTER_DIRECTIVES]
})


export class AdminComponent {
randomQuote: string;
private _data: Observable<any[]>;



  constructor(public http: Http) {
this.getRandomQuote();
  }


getRandomQuote() {
  this.http.get('https://randomuser.me/api/')
    .subscribe(
      data => this._data = data.json(),
      err => this.logError(err),
      () => console.log('User api call')
    );
}

  logError(err) {
    console.error('There was an error: ' + err);
  }
}

here is my admin.html code

html

 <Admin> <div class="row"> <div class="col-md-2" style="padding-top:2em; background-color:#DCDCDC;"> <div class="text-center"> <img src="data?.results[0].picture.large" class="img-circle" alt="pic" /><br /> <a href="#">Logout</a> </div> <ul class="nav nav-sidebar"> <li> <a [routerLink]="['Hello']">Users</a></li> <li><a >Groups</a></li> <li><a >Products</a></li> <li><a >APIs</a></li> </ul> </div> <div class="col-md-10"> <div class="page-header "> <h1> Admin Portal </h1> </div> <div class="content padding has-header"> <router-outlet> </router-outlet> </div> </div> </div> </Admin> 

Answer 1

this.http.get(...).subscribe(data => this.data = data.json());

<img [src]="data?.results[0].picture.large">