#Display User details

Now that we have the details of the user, we should display them in the view. We'll only display thefollowers, following, public repos and public gist numbers.

Let's remove theconsole.logfrom theuser-detail.tsfile.

Since we already addedthis.user = user, to assign the result to the class' user property, we can now create a view by editing the page's template html.

app/pages/user-details/user-details.html

<!-- ion-header -->

<ion-content padding >
  <ion-list>
    <ion-item>
      <ion-label>Followers</ion-label>
      <ion-badge item-right>{{user?.followers}}</ion-badge>
    </ion-item>
     <ion-item>
      <ion-label>Following</ion-label>
      <ion-badge item-right>{{user?.following}}</ion-badge>
    </ion-item>
     <ion-item>
      <ion-label>Repos</ion-label>
      <ion-badge item-right>{{user?.public_repos}}</ion-badge>
    </ion-item>
     <ion-item>
      <ion-label>Gists</ion-label>
      <ion-badge item-right>{{user?.public_gists}}</ion-badge>
    </ion-item>
  </ion-list>    
</ion-content>

Theuser?.propertyjust tells angular thatusersmay be null initially, so that an undefined error is not thrown.

I've used anion-badgeand anion-labelto view the user data. Go tohttp://localhost:8100, and you should see this. Then click on any user.