Skip to main content

Add Angular 13 Material

Step 7 — Styling the UI with Angular Material 13​

In this step of our Angular 13 tutorial, we'll proceed to add Angular Material to our project and style our application UI.

Angular Material provides Material Design components that allow developers to create professional UIs. Setting up Angular Material in our project is much easier now with the new ng add command of the Angular CLI v7+.

Head back to your command-line interface, and run the following command from the root of your project:

$ ng add @angular/material

You'll be asked for choosing a theme, choose Indigo/Pink.

For the other options — Set up HammerJS for gesture recognition? and Set up browser animations for Angular Material? Simply press Enter in your keyboard to choose the default answers.

Next, open the src/styles.css file and add a theme:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Each Angular Material component has a separate module that you need to import before you can use the component. Open the src/app/app.module.ts file and add the following imports:

import { MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatButtonModule,
  MatProgressSpinnerModule } from '@angular/material';

We imported the following modules:

  • MatToolbar that provides a container for headers, titles, or actions.
  • MatCard that provides a content container for text, photos, and actions in the context of a single subject.
  • MatButton that provides a native <button> or <a> element enhanced with Material Design styling and ink ripples.
  • MatProgressSpinner that provides a circular indicator of progress and activity.

Next, you need to include these modules in the imports array:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, open the src/app/app.component.html file and update it as follows:

<mat-toolbar color="primary">
  <h1>
    ngStore
  </h1>
  <button mat-button routerLink="/">Home</button>
  <button mat-button routerLink="/about">About</button>

</mat-toolbar>

<router-outlet></router-outlet>

We created the shell of our application containing a top bar with two navigation buttons to the home and about components.

As a summary of what we did until this point of our tutorial — We have setup HttpClient and Angular Material v13 in our project, created the home and about components and configured routing, and finaly added the shell of our application containing a topbar with navigation.

In the next step of our tutorial, we'll learn how to fetch the JSON data from our REST API server using HttpClient v13.

Also read 3+ ways to integrate Bootstrap with Angular and how to style Angular 13 UIs with Bootstrap 4.