STEP_5.md

Quick Jump

• Initial Setup
• Step 1
• Step 2
• Step 3
• Step 4
• Step 5 <-
• Step 6
• Step 7
• Step 8
• Step 9
• Step 10

Step #5 Task:

Let's add Selected User functionality and show the selected user details in our details container

File: src/app/app.component.html

<mat-sidenav mode="side" opened>

  <mat-tab-group>
    <mat-tab label="Users">
      <mat-nav-list>
        <mat-list-item *ngFor="let user of users" (click)="selectedUser = user">
          <mat-icon matListAvatar svgIcon="avatars:{{user.avatar}}" class="avatar"></mat-icon>
          <span>{{user.name}}</span>
        </mat-list-item>
      </mat-nav-list>
    </mat-tab>
    <mat-tab label="Settings">
      <span>Settings</span>
    </mat-tab>
  </mat-tab-group>

</mat-sidenav>
<div class="content">
   <mat-icon svgIcon="avatars:{{selectedUser.avatar}}" class="avatar"></mat-icon>
   <h2>{{selectedUser.name}}</h2>
   <p>{{selectedUser.details}}</p>
</div>

Let's select the first user from the users list for our initial view state

File: src/app/app.component.ts

import {Component} from '@angular/core';
import {MatIconRegistry} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  users = [
    {
      name: 'Lia Lugo',
      avatar: 'svg-11',
      details: 'I love cheese, ...',
      isAdmin: true,
      isCool: false
    },
    {
      name: 'George Duke',
      avatar: 'svg-12',
      details: 'Zombie ipsum ...',
      isAdmin: false,
      isCool: true
    }
    // ...
  ];

  selectedUser = this.users[0];

  ...
}

File: src/app/app.component.css

.content {
  padding: 12px;
}

---

Go to Tutorial Step 6