Routing Angular Applications: Lesson 19 of 23

Dashboard Users Section

Up Next

Dashboard User Details Form

Autoplaying in 7 seconds!

Cancel

W

Table of Contents

    e'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

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.