STEP_6.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 #6 Task:

Here we will use mat-card and mat-slide-toggle components from Angular Material.

File: src/app/app.component.html

...

<div class="content" fxLayout="row" fxLayout.sm="column" fxLayoutGap="16px">

  <mat-card fxFlex="80">
    <mat-icon svgIcon="avatars:{{selectedUser.avatar}}" class="avatar"></mat-icon>
    <h2>{{selectedUser.name}}</h2>
    <p>{{selectedUser.details}}</p>
  </mat-card>

  <mat-card fxFlex fxLayout="column" fxLayoutGap="14px">
    <mat-slide-toggle [(ngModel)]="selectedUser.isAdmin">Is Admin?</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="selectedUser.isCool">Is Cool?</mat-slide-toggle>
  </mat-card>

</div>

...

Tips

1. FlexLayout

Using fxLayout.sm="column" tells the content to be a column container when the screen is small (breakpoint 960px)

Specifying a gap between the different children can be done by using fxLayoutGap with a value of 16px.

2. HammerJS

HammerJS handles all the user interactions and gestures for Material and simplifies the API.

Including the hammerjs package in our Angular application using Webpack.

File: src/app/app.module.ts

...

import 'hammerjs';

...

---

Go to Tutorial Step 7