Video Course

Routing Angular v2+ Applications: Lesson 19 of 23

Dashboard Users Section

Up Next

Dashboard User Details Form

Autoplaying in 7 seconds!

Cancel

We'll be adding a new users section of the dashboard that will function similarly to how the about section functions.

The difference here is that we'll have a nested <router-outlet></router-outlet>.

dashboard-users.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../shared/models/user';
import { UserService } from '../../shared/services/user.service';

@Component({
  template: `
    <h2>Users Section</h2>
    <p>Manage your users.</p>
    <div class="row">
      <div class="col-sm-4">
        <div *ngIf="users" class="list-group">
          <a *ngFor="let user of users" 
            class="list-group-item"
            [routerLink]="['/dashboard/users', user.username]">
              {{ user.name }}
          </a>
        </div>

      </div>
      <div class="col-sm-8">
        <router-outlet></router-outlet>
      </div>
    </div>
  `
})
export class DashboardUsersComponent implements OnInit {
  users: User[];

  constructor(private service: UserService) {}

  ngOnInit() {
    this.service.getUsers().then(users => this.users = users); 
  }

}

dashboard-users-home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  template: `
    i am the dashboard users home
  `
})
export class DashboardUsersHomeComponent implements OnInit {
  constructor() {}

  ngOnInit() {

  }
}

dashboard-user-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from '../../shared/models/user';
import { UserService } from '../../shared/services/user.service';

@Component({
  template: `
    <div *ngIf="user">
      <h2>{{ user.name }}</h2>
    </div>
  `
})
export class DashboardUserDetailsComponent implements OnInit {
  user: User;

  constructor(private service: UserService, private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.forEach(params => {
      let username = params['username'];

      this.service.getUser(username).then(user => {
        console.log(user);
        return this.user = user
      }); 
    });
  }

}

Chris Sevilleja

157 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.