#Viewing User Details

Next, we'll create the details view for users which will be reached by clicking on a particular user in the list of users.

Using the Ionic CLI, create a new page calleduser-details

$ ionic g page user-details

Auser-detailsfolder is created inside pages folder, and has three files, the page'shtml, the_ts_and the_scss_for styling.

Rename the class insrc/app/pages/user-details/user-details.tstoUserDetailsPage. This is not necessary, it's just a preference.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-user-details',
  templateUrl: 'user-details.html'
})
export class UserDetailsPage {
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello UserDetails Page');
  }
}

Before we do anything we need to make sure that by clicking a user, this page is loaded.

We first add the page to thesrc/app/app.module.tsfile.

// Other imports

import {UserDetailsPage } from '../pages/user-details/user-details';

@NgModule({
  declarations: [
    // OtherPages,
    UserDetailsPage // Add UserDetailsPage here
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // Other Pages,
    UserDetailsPage // Add UserDetailsPage here
  ],
  providers: [GithubUsers]
})
export class AppModule {}

Then let's make a few changes to the user-details page template.

src/pages/user-details/user-details.html

<ion-header>
  <ion-navbar>
    <ion-title>{{login}}'s details</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding >
  <h3>User Details view page</h3>
</ion-content>

Next, we'll go to the Users page and add a navigation to the user-details page.

src/pages/users/users.ts

// Other Imports

import { UserDetailsPage } from '../user-details/user-details';

@Component({
  selector: 'page-users',
  templateUrl: 'users.html'
})
export class UsersPage {
  users: User[]

  constructor(public navCtrl: NavController, private githubUsers: GithubUsers) {
    // Commented out for brevity
  }

  goToDetails(login: string) {
    this.navCtrl.push(UserDetailsPage, {login});
  }
}

First of all we import theUserDetailsPageat the top withimport {UserDetailsPage} from '../user-details/user-details'.

We then add a method that will handle the navigation,goToDetails. It takes in a login (username) as a parameter.

Ionic 2 treats navigation as a stack, meaning pages are added on top of each other. That is why you see thethis.navCtrl.push, and we push a page into the navigation stack. Going back or pressing the back button is like popping the last element in the stack (Last In First Out). The second parameter of the push is the object we wish to pass to the next page.

{login}is a es2015 property shorthand. In es5, this translates to{login: login}.

Finally, we need to call thisgoToDetailsin the view.

src/pages/users/users.html

<!-- ion-header -->
<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let user of users" (click)="goToDetails(user.login)">
      <!-- ion-item content-->
    </button>
  </ion-list>
</ion-content>

All we've done is add(click)="goToDetails(user.login)"in the next to the_*ngFor_directive.

And finally, we need to get the user passed to the details page.

src/pages/user-details/user-details.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-user-details',
  templateUrl: 'user-details.html'
})
export class UserDetailsPage {
  login: string;

  constructor(public navCtrl: NavController, private navParams: NavParams) {
    this.login = navParams.get('login');
  }
}

We've simply addedNavParamsto the existing imports to enable us access the navigation parameters.

Then, declared aloginproperty of typestring. Remember this represents the username.

We inject the NavParams provider in the constructor asnavParams, which we then use to get the value of the passed parameter from the previous page withthis.login = navParams.get('login'). This should update the user's login/username correctly in our details view.

If you go tohttp://localhost:8100, you should be able to click on a user and see this.

The username/login of the user you clicked should be the as a title in the view.

GET CORRECT USER DETAILS.

Now that we have the user in our details vew, we need to get his specific details. To do this we need to edit theGithubUsersprovider to handle the request. The request will be made tohttps://api.github.com/users/{login}, where we pass in the username/login as the last parameter.

src/providers/github-users.ts

// Imports

@Injectable()
export class GithubUsers {
  githubApiUrl = 'https://api.github.com';

  constructor(public http: Http) { }

  // Load all github users
  load(): Observable<User[]> {
   // Load useres
  }

  // Get github user by providing login(username)
  loadDetails(login: string): Observable<User> {
    return this.http.get(`${this.githubApiUrl}/users/${login}`)
      .map(res => <User>(res.json()))
  }
}

We've added an almost identical method to the initailload()calledloadDetails(). It takes in a string_login_as a parameter and returns an Observable of User, that we can subscribe to, to get the results of the request. It casts the response to the User model with<User>res.json().

Thehttp.getrequest is sent to${this.githubApiUrl}/users/${login}. This is ES6 template strings, also available in typescript. It Involves using backticks, the key below the escape key on the keyboard, and passing any values with the${var}syntax, and it will reolve to a valid string.

Now, we go to the user-details page and get the correct user details.

src/pages/user-details/user-details.ts

// Other imports

import { User } from '../../models/user';

import { GithubUsers } from '../../providers/github-users';

@Component({
  selector: 'page-user-details',
  templateUrl: 'user-details.html'
})
export class UserDetailsPage {
  user: User;
  login: string;

  constructor(public navCtrl: NavController, private navParams: NavParams, private githubUsers: GithubUsers) {
    this.login = navParams.get('login');
    githubUsers.loadDetails(this.login).subscribe(user => {
      this.user = user;
      console.log(user)
    })
  }
}

We've first of all imported theGithubUsersprovider withimport {GithubUsers} from '../../providers/github-users';.

We then import the user model withimport {User} from '../../models/user';.

We then inject it in the constructor asgithubUsersthen call thegithubUsers.loadDetailswith the value retrieved from the navigation paramslogin. We assign the resutls to the class property 'user', then log the results, just for debuggin purpose.

Go tohttp://localhost:8100, and click on a user, you should see this.

If you expand the logged object, you'll see it has the properties of our user model.