step_1.md

• Step 1 <-
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6
• Step 7
• Step 8

Full Demo

Open this StackBlitz to get started

Step 1 completed demo

Step 1

We already have a StackBlitz instance with some data, a service, and some types. ng add @angular/material has already been run, so Angular Material is ready to be used in the project. The pre-built theme is "deeppurple-amber."

In this step, you will add a <mat-toolbar> component.

Import the MatToolbarModule into AppModule

app.module.ts

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
  ],
  ...
})

Replace the welcome message with the toolbar. Make it deeppurple.

app.component.html

<mat-toolbar color="primary">
  <h1>Astronaut Directory</h1>
</mat-toolbar>