In the last module we installed the Angular Material Component Library. Now that we have that taken care of we can start to improve the appearance of the FredsCars web application starting with the Navigation Header.
To start we are going to use a MatToolBar Component for the top navigation bar. And we will replace the plain navigation anchor links with MatIcon and MatButton.
The first thing we need to do is register the Angular Material Modules in either the root module or a custom feature module. It’s probably a good idea to break out the management of Angular Material Modules into its own configuration to keep the root module clean just like we did for AppRoutingModule and, because we may add a lot more Angular Material features along the way. So let’s create an AngularMaterial Module next.
Create the AngularMaterial Module
Create a file called angular-material.module.ts in the FredsCars/src/app folder with the following contents.
import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatToolbarModule,
MatIconModule,
MatButtonModule
],
exports: [
MatToolbarModule,
MatIconModule,
MatButtonModule
]
})
export class AngularMaterialModule { }
In the above code we are importing the Angular Material Modules we will need; MatToolbarModule, MatIconModule, and MatButtonModule. The next thing we need to do is register our custom Angular Module in the root module.
Register the AngularMaterial Module
Open the app.module.ts file in the FredsCars/src/app folder and modify it with the code below.
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { VehiclesComponent } from './vehicles/vehicles.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
@NgModule({
declarations: [
AppComponent,
VehiclesComponent,
WelcomeComponent,
NavMenuComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
AngularMaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In the code above we simply registered our new custom module in the root module.
Using MatToobar
Now that we have our AngularMaterialModule configured, we should be able to use the MatToolbar component in our HTML. So let’s give it a go.
Update the NavMenuComponent HTML
Open the nav-menu.component.html file in the FredsCars/src/app/nav-menu folder and modify its contents with the code below.
<header>
<mat-toolbar color="primary">
<a mat-icon-button [routerLink]="['/']">
<mat-icon>
home
</mat-icon>
</a>
<a mat-flat-button [routerLink]="['/vehicles']">
Vehicles
</a>
</mat-toolbar>
</header>
Restart the application and run in debug mode and you should see results similar to the following.
As you can see we have replaced our lackluster anchor links and nav section with a nice spiffy toolbar. Let’s talk about what we just did in the NavComponent’s HTML above.
MatToolbar
The documentation for the MatToolbar component can be found at: https://material.angular.io/components/toolbar/overview. It says that <mat-toolbar> is a container for headers, titles, or actions. It also makes a nice container for our navigation buttons as well.
The first thing we did above was replace the <nav> element with the <mat-toolbar> element where the MatToolBar component now sits. We also set the color attribute to primary.
<mat-toolbar color="primary">The theming section of the MatToolbar documentation states:
The color of a <mat-toolbar> can be changed by using the color property. By default, toolbars use a neutral background color based on the current theme (light or dark). This can be changed to ‘primary’, ‘accent’, or ‘warn’.
Theming
The following are code for and screenshots of the default MatToolbar neutral background, and the three supported colors.
Default Neutral Color
<!-- no color specified -->
<mat-toolbar>
Primary Color
<!-- This is the color we are using in our application -->
<mat-toolbar color="primary">
Accent Color
<!-- accent -->
<mat-toolbar color="accent">
Warn Color
<!-- warn-->
<mat-toolbar color="warn">
The next thing we did was add a couple of button directives to our plain text <a> elements giving them the appearance of being buttons.
We changed the Home link to our welcome screen from this:
<a [routerLink]="['/']">Home</a>to this:
<a mat-icon-button [routerLink]="['/']">
<mat-icon>
home
</mat-icon>
</a>which renders like this:
And we changed our vehicles <a> element link from this:
<a [routerLink]="['/vehicles']">Vehicles</a>to this:
<a mat-flat-button [routerLink]="['/vehicles']">
Vehicles
</a>which renders like this:
But how does all this magic happen?
It’s worth taking a pit stop here and spending a few minutes to talk about Angular Material Buttons.
Angular Material Buttons
The documentation for the Angular Material Buttons can be found at: https://material.angular.io/components/button/overview. It says that Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples.
This means that all the mat-button directive variations (mat-raised-button, mat-flat-button and so on) can be used on both <button> and <a> elements. However buttons should be used for actions and anchor elements should be used for navigation. So we have left our <a> elements instead of changing them to <button> elements and just applied some mat-button directives.
Angular Material has a button and color system somewhat similar to Bootstrap.
The following is a screenshot laying out examples of the seven styles of button and six colors available.
The seven styles that can be used are:
- Basic (default)
- Raised (mat-raised-button)
- Stroked (mat-stroked-button)
- Flat (mat-flat-button)
- Icon (mat-icon-button)
- FAB (mat-fab)
- Mini FAB (mat-mini-fab)
The six colors available are:
- Basic (the default)
- Primary
- Accent
- Warn
- Disabled
- Link
From the available colors listed above, Primary, Accent, and Warn target the three theming colors.
MatIconButton
Let’s take another look at our Home (Welcome) button code nested in the MatToolbar.
<a mat-icon-button [routerLink]="['/']">
<mat-icon>
home
</mat-icon>
</a>In the highlighted code above we added a mat-icon-button directive to an <a> element specifying it will contain an icon button.
MatIcon
Nested inside of the <a> element dressed with the mat-icon-button attribute is a <mat-icon> element where a MatIcon component can sit.
The MatIcon element is a container for the name of a Material Symbol icon, in this case home which again renders like this.
MatFlatButton
Let’s also take another look at the Vehicles button code in the toolbar.
<a mat-flat-button [routerLink]="['/vehicles']">
Vehicles
</a>Here we simply added the mat-flat-button directive to an anchor element which selects the following look, a flat style button with the Basic (default) color.
And again in our case for the Vehicles button in the toolbar, renders like this.
What’s Next
In this module we set up an AngularMaterial Module to cleanly manage our Angular Material Dependency registrations. Next we used Angular Material to improve the appearance of our anchor navigation links with Angular Material Toolbar and Button components. In the next couple of modules we will add header and footer components to our application and learn a new technology to make it easier to work with CSS called Saas.