STEP_3.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 #3 Task:

Here you will have a tab group that will contain the users list within a nav-list component

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">
            <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>
...

Adding users to the sidebar list

File: src/app/app.component.ts

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

@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
    }
    // ...
  ];
}

---

Go to Tutorial Step 4