© Venkata Keerti Kotaru 2020
V. K. KotaruAngular for Material Designhttps://doi.org/10.1007/978-1-4842-5434-9_12

12. Material Design: Navigation

Venkata Keerti Kotaru1 
(1)
Hyderabad, India
 

The previous chapter described implementing SPAs (single-page applications) and routing techniques that navigate between pages. This chapter covers Material Design components for navigation.

The chapter discusses two Angular Material components: toolbar and sidenav. The most common use of the component is application-level navigation between pages. These components are easy to implement and provide a great user experience with the tried and tested Material Design patterns.

Toolbar

Toolbars are typically placed on top of a web page. It provides a title and list of actions that the user may perform on the page. A toolbar encompasses the top navigation of the page.

Getting Started

To use Angular Material’s toolbar, import the module containing the component. In Listing 12-1, all the Material Design components are encompassed in superheroes-material-design.module.ts.

Import the MatToolbarModule from the Angular Material repository. Import it into the NgModule (Angular module) encompassing all the Material Design code in the sample application.
import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
  declarations: [
        // Removed code for brevity
  ],
  imports: [
    MatToolbarModule,
  ],
  exports: [
  ],
  providers:[HitCounter]
})
export class SuperheroesMaterialDesignModule { }
Listing 12-1

Import Toolbar Module

The <mat-toolbar> component is now available for the application to use. Typically, a toolbar contains the top navigation of a page.

In the sample application, we organize the toolbar as follows. We place the toolbar at the same level as <router-outlet>. The router outlet updates the content and the components based on the route or the URL. Refer to Chapter 11 for more information on <router-outlet>.

In Figure 12-1, the router updates the bottom section of the page. The toolbar does not change because it is outside the scope of the Angular router.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig1_HTML.jpg
Figure 12-1

Organization of a page with toolbar

In the sample application’s Superheroes Material Design module, let’s create a component that wraps the Angular Material toolbar. We use this component when we need to reference the toolbar. Creating a separate component allows us to customize our application’s toolbar. We will reuse the component throughout the application.

To create a new component, run the Angular CLI command shown in Listing 12-2.
ng g component superheroes-material-design/superhero-toolbar
Listing 12-2

Create a Component for the Toolbar

In the newly created component, add an Angular Material toolbar. Use the <mat-toolbar> component. Listing 12-3 shows basic usage of the component, with just a title on the toolbar.
<mat-toolbar color="primary">
  <h2>Welcome to Superheroes application</h2>
</mat-toolbar>
Listing 12-3

Toolbar with a Welcome Title

Consider the TypeScript code component in Listing 12-4. Notice line 3. To reference the component in the rest of the application, use the app-superhero-toolbar selector. See Chapter 4 for information on working with components.
1. import { Component, OnInit } from '@angular/core';
2. @Component({
3.     selector: 'app-superhero-toolbar',
4.  templateUrl: './superhero-toolbar.component.html',
5.  styleUrls: ['./superhero-toolbar.component.css']
6. })
7. export class SuperheroToolbarComponent implements OnInit {
8.  constructor() { }
9.  ngOnInit() {
10.  }
11. }
Listing 12-4

Toolbar TypeScript File Component

We created the component as part of the Superhero Material Design module. In addition to creating new files, Angular CLI updates the Angular module file (see line 2 and line 6). Listing 12-5 is the superheroes-material-design.module.ts file. Angular CLI imports the new component, SuperheroToolbarComponent, and includes it in the declaration array.

Figure 12-2 depicts the toolbar next to <router-outlet>, which is in <app-component>. It is outside SuperheroesMaterialDesignModule. Hence, to use it in AppModule (containing <app-component>), we need to export the component. In Listing 12-5, see line 12. It exports the component from the module.

Note

Consider using --export option with Angular CLI, while generating the component. It generates the code that declares and exports the component from SuperheroesMaterialDesignModule. See Listing 12-6 for the export option included. If we did not use this option while creating the component, we may edit superhero-material-design.module.ts to add the component to exports.

ng g component superheroes-material-design/superhero-toolbar --export
Listing 12-5

Create a Component for Toolbar with --export Option

1. import { MatToolbarModule } from '@angular/material/toolbar';
2. import { SuperheroToolbarComponent } from './superhero-toolbar/superhero-toolbar.component';
3. // Removed code for brevity
4. @NgModule({
5.  declarations: [
6.    SuperheroToolbarComponent,
7.  ],
8.  imports: [
9.      // Removed code for brevity
10.  ],
11.  exports: [
12.    SuperheroToolbarComponent,
13.  ],
14.  providers:[]
15. })
16. export class SuperheroesMaterialDesignModule { }
Listing 12-6

Export Toolbar Component from SuperheroMaterialDesignModule

Next, we use SuperheroToolbarComponent in AppComponent, the root component of the application. In the sample application, AppModule already imports SuperheroesMaterialDesignModule. See line 9 in Listing 12-7.
1. import {SuperheroesMaterialDesignModule} from './superheroes-material-design/superheroes-material-design.module';
2. // Removed code for brevity
3. @NgModule({
4.  declarations: [
5.  AppComponent
6. ],
7. imports: [
8.  AppRoutingModule,
9.  SuperheroesMaterialDesignModule
10. ],
11. bootstrap: [AppComponent]
12. })
13. export class AppModule { }
Listing 12-7

App Module that imports SuperheroesMaterialDesignModule

The <app-superhero-toolbar> component is used in AppComponent, the root component, along with <router-outlet>. See Listing 12-8.
--- app.component.html ---
<app-superhero-toolbar></app-superhero-toolbar>
<router-outlet></router-outlet>
Listing 12-8

App Component Using Superhero Toolbar and router-outlet

This achieves the structure and organization for the application specified in Figure 12-2.

Actions on the Toolbar

We already created a basic toolbar with just a title. It can contain additional elements. The toolbar is a natural location to place page-level actions. An action could be an operation, like save content, or a trigger for navigation. The toolbar typically contains high-level navigation actions that take the user to a new module or a functionality.

Considering that a page title is already on the toolbar and aligned to the left, let’s place the actions aligned to the right.

The Angular Material toolbar does not control the position of the elements. The style sheet manages the position and alignment. In Listing 12-9, we use CSS Flexbox to position the controls. We place two arbitrary actions—View and Create—(indicating view superheroes and create superheroes)in the right corner.
1. <mat-toolbar color="primary">
2.  Welcome to Superheroes application
3.  <span class="central-stretchable-space"></span>
4.  <a class="action">View</a>
5.  <a class="action">Create</a>
6. </mat-toolbar>
Listing 12-9

Place Actions on Toolbar

The “central-stretchable-space” CSS class is on line 3. It is applied on the central span between the title and the actions. Because of the CSS class, it stretches based on the toolbar’s width (which depends on the browser window’s width). Listing 12-10 is for the CSS that collapses or stretches the available space.
--- superhero-toolbar.component.css ---
.central-stretchable-space {
    flex: 1 1 auto;
}
Listing 12-10

Flex the Element to Take up Remaining Space

In Listing 12-10, flex is a shorthand property for the following.

  • flex-grow: The first value in Listing 12-10 represents flex-grow. The value is a number indicating how much the given element should grow (or stretch) in relation to the other flex elements around it. With a value of 1, it grows in the available space.

  • flex-shrink: The second value in Listing 12-10 represents flex-shrink. The value is a number indicating how much the given element should shrink (or collapse) in relation to the other flex elements around it.

  • flex-basis: The third value in Listing 12-10 represents flex-basis. It is the length of the item. Possible values are auto, inherit, or percentage, or a pixel value.

Figure 12-2 shows the result.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig2_HTML.jpg
Figure 12-2

Actions on right top of the page

Multiple Rows in the Toolbar

A toolbar can have multiple rows. Use mat-toolbar-row to create a toolbar row. Listing 12-11 shows a subheader in the additional row. As an example, we may use the top row as an application title and the second row as the screen-level title.

To create a new row in the toolbar, use the <mat-toolbar-row> component.
<mat-toolbar color="primary" >
  <mat-toolbar-row>
    Welcome to Superheroes application
  </mat-toolbar-row>
  <mat-toolbar-row>
    List of Superheroes
    <span class="central-stretchable-space"></span>
    <a class="action">View</a>
    <a class="action">Create</a>
  </mat-toolbar-row>
</mat-toolbar>
Listing 12-11

Multiple Rows in Toolbar

We moved actions to the second toolbar row. The result is shown in Figure 12-3.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig3_HTML.jpg
Figure 12-3

Using rows in toolbar

Toolbar Theme

Angular Material components support the following color themes.

  • Primary: The most used primary color on the page.

  • Accent: The secondary, optional color on a page. Usage of the color helps distinguish the application.

  • Warn: The color used when a component needs attention; for example, a delete action, an unsaved cancel action, and so forth.

Use the color attribute on mat-toolbar to specify the color on the toolbar (see Listing 12-12).
<mat-toolbar color="primary" >
</mat-toolbar>
Listing 12-12

Color on the Toolbar

The colors are dependent on the Material Design theme in use. Figure 12-4 shows the colors with the default theme.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig4_HTML.jpg
Figure 12-4

Colors with default theme

Integration with Angular Router

So far, we have created a toolbar, and added and positioned links (or buttons) on it. We created a view link and a create link on the toolbar. The links integrate with the router to navigate to various routes in the application.

In the sample application, imagine we go to /create-hero route on clicking the create link and navigate to /heroes on clicking the view link. We may use the routerLink directive, which helps redirections in an Angular application, without attempting to reload the whole page. Chapter 11 discusses more on routing and the routerLink directive. Listing 12-13 is for the superhero toolbar template. Lines 7 to 12 add the routerLink attribute.
1. <mat-toolbar color="primary">
2.  <mat-toolbar-row>
3.    Welcome to Superheroes application
4.  </mat-toolbar-row>
5.  <mat-toolbar-row >
6.    <span class="central-stretchable-space"></span>
7.    <a class="action" routerLink="/create-hero" >
8.      Create
9.    </a>
10.    <a class="action" routerLink="/heroes" >
11.      View
12.    </a>
13.  </mat-toolbar-row>
14. </mat-toolbar>
Listing 12-13

Router Integration with the Toolbar

Remember, we encapsulate routing logic to a module of its own, named AppRoutingModule. This module imports RouterModule from @angular/router, which has the routerLink directive. Hence, we need to import AppRoutingModule into SuperheroesMaterialDesignModule for the routerLink directive to work. Consider Listing 12-14.
import { AppRoutingModule } from '../app-routing.module';
@NgModule({
  declarations: [
        // removed code for brevity
],
  imports: [
    AppRoutingModule,
],
  exports: [
        // removed code for brevity.
  ],
  providers:[  ],
  entryComponents: [  ]
})
export class SuperheroesMaterialDesignModule { }
Listing 12-14

Import Router Module to Superheroes Material Design Module

There is an alternative approach if we wish to exclude routerLink and the routing logic out of the superheroes Material Design module. Considering the module is aimed to purely provide a Material Design look and feel and behavior to the application, we may move out the routerLink directive implementation from the module and the component.

However, we still have the toolbar for top navigation. It needs the route changes as the user attempts to navigate. We may use content projection with ng-content. Supply the navigation links, including the routerLink integration to the toolbar component. The parent component to the toolbar (AppComponent) may supply the links.

Note

Refer to Chapter 4 to read more about ng-content.

To switch to this approach, modify SuperheroToolbarComponent to show the dynamic content provided by AppComponent. Use ng-content to show dynamic content in the second toolbar row. See line 7 in Listing 12-15.
1. <mat-toolbar color="primary">
2.  <mat-toolbar-row>
3.    Superhero - Warn Color
4.  </mat-toolbar-row>
5.  <mat-toolbar-row>
6.  <span class="central-stretchable-space"></span>
7.   <ng-content></ng-content>
8.  </mat-toolbar-row>
9. </mat-toolbar>
Listing 12-15

Use ng-content to Show Dynamic Content from AppComponent

We no longer have the links view and create in the toolbar component. Listing 12-16 is for app.component.html, which provides the links to the toolbar as child elements. These links show up in place of ng-content in line 7.
<app-superhero-toolbar>
    <a routerLink="/create-hero">
        Create
    </a>
    <a routerLink="/heroes" >
        View
    </a>
</app-superhero-toolbar>
Listing 12-16

Router Links Provided in AppComponent

With this approach, we separated the routing logic and the modules from the Angular Material components’ implementation.

Sidenav

Sidenav is often used as a navigation control. It can pull from the right or left of a page. It may have application-level or contextual page-level actions. The actions could take the user to a different route or page. We may also use them as actions on data on the page.

Note

Sidenav is often used for navigation elements; however, it is not necessary. It can be used as a container with a form or content that shows and hides as needed.

Figure 12-5 is a sample implementation of the sidenav.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig5_HTML.jpg
Figure 12-5

A sample sidenav

Getting Started

To use Angular Material’s sidenav, import the module containing the components and the directives. In Listing 12-17, all the Material Design components are encompassed in superheroes-material-design.module.ts.

Import MatSidenavModule from the Angular Material repository. Import it into the NgModule (Angular Module) encompassing all the Material Design code in the sample application.
import { MatSidenavModule } from '@angular/material/sidenav';
@NgModule({
  declarations: [
        // Removed code for brevity
  ],
  imports: [
    MatSidenavModule,
  ],
  exports: [
  ],
  providers:[]
})
export class SuperheroesMaterialDesignModule { }
Listing 12-17

Import Sidenav Module

Now that the modules needed for the sidenav are imported, we may create a component in SuperheroesMaterialDesignModule to use the sidenav. Run the Angular CLI command in Listing 12-18.
ng g component superheroes-material-design/superhero-sidenav
Listing 12-18

Create sidenav Component for Superheroes Application

The command creates SuperheroSidenavComponent. It also imports the component into SuperheroMaterialDesignModule and adds to the declarations. This component is intended to be used outside SuperheroMaterialDesignModule (the Angular Module). Hence, add the component to the exports array list as well. Consider Listing 12-19.
import { MatSidenavModule } from '@angular/material/sidenav';
import { SuperheroSidenavComponent } from './superhero-sidenav/superhero-sidenav.component';
@NgModule({
  declarations: [
      SuperheroSidenavComponent,
      // Removed code for brevity
  ],
  imports: [
    MatSidenavModule,
  ],
  exports: [
      SuperheroSidenavComponent
  ],
  providers:[]
})
export class SuperheroesMaterialDesignModule { }
Listing 12-19

Export the sidenav Component from SuperheroesMaterialDesignModule

Note

Consider using --export option with Angular CLI while generating the component. It generates the code that declares and exports the component from SuperheroesMaterialDesignModule. See Listing 12-20 for the included export option. If we did not use this option while creating the component, we may edit superhero-material-design.module.ts to add the component to the exports.

ng g component superheroes-material-design/superhero-sidenav --export
Listing 12-20

Create and Export sidenav Component for Superheroes Application

As seen in Figure 12-5, we will show navigation links in sidenav. In the newly created SuperheroSidenavComponent, we will import and use the mat-sidenav component. Listing 12-21 encapsulates links within a mat-sidenav component. The links and div elements are the contents of the sidenav.
<mat-sidenav #sidenav>
 <!-- Sidenav content -->
 <div class="container">
   <div>
     <a href="#">
       Create
     </a>
   </div>
   <!-- more links go here. Deleted code for brevity -->
  </div>
</mat-sidenav>
Listing 12-21

Sidenav Content

With the sidenav, we can use the configurations in Listing 12-21 as input attributes on the <mat-sidenav> component.

  • Position: The possible values are “start” and “end”. The default value is “start”, which refers to the left side of the page. We may change it to “end” for the right side of the page. Figure 12-5 shows the sidenav on right (end).

  • Mode: The possible values are “over”, “push”, and “side”. We see it with the “over” value in Figure 12-x. Figure 12-x shows the “side” sidenav mode .

  • Opened: We may set the value to be true/false. If true, the application loads with the sidenav open.

  • Open(): A function call on the component to open or hide the sidenav.

  • Close(): A function call on the component to close or hide the sidenav.

<mat-sidenav mode="side" opened position="end" #sidenav>
<!-- deleted code for brevity -->
<mat-sidenav>
Listing 12-22

Sidenav with Additional Configurations

Figure 12-6 shows the result. We are not done yet. Just adding the code in Listing 12-22 does not show the component. We need to integrate the newly created superhero sidenav component with the application.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig6_HTML.jpg
Figure 12-6

Sidenav on the right

Organizing the Sample Application for Sidenav

So far, we have created a component (SuperheroSidenavComponent) in SuperheroesMaterialDesignModule and used the mat-sidenav component. We have not yet used the newly created component in the application. Remember, we exported the SuperheroSidenavComponent in Listing 12-22. It is now available for module referencing SuperheroesMaterialDesignModule, which is the main module(AppModule) in the sample application.

mat-sidenav, an Angular Material component, is required to be a child component of mat-sidenav-container. The container may have two child components: the sidenav (mat-sidenav) and the content (mat-sidenav-content). Figure 12-7 is the layout at the application level in the root component.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig7_HTML.jpg
Figure 12-7

Organizing a sidenav container, content, and sidenav

The sidenav container is the parent component of everything that the sidenav implements. The component selector for usage in HTML template is mat-sidenav-container. For the sidenav content component, the selector is mat-sidenav-content. For a sidenav component, the selector is mat-sidenav.

Note

There can only be one sidenav in an application.

The sidenav content is the workspace of the application. Chapter 11 describes the <router-outlet> loads content of the application at a given route. For most applications, it is the workspace. If the application is using a sidenav, one implementation is to encapsulate <router-outlet> within the sidenav content.

Remember, <router-outlet> is on AppComponent. We may use mat-sidenav-container (the parent component) and mat-sidenav-content in AppComponent. However, so far, we have packaged all Angular Material implementation in SuperheroesMaterialDesignModule. Continuing with this approach, we may want to stay away from using the Angular Material components (mat-sidenav-container and mat-sidenav-component) directly in AppComponent, which belongs to AppModule.

Note

mat-sidenav is referenced in SuperheroSidenavComponent, which is part of SuperheroesMaterialDesignModule. It is already part of the desired module.

Hence, let’s create two new components in SuperheroesMaterialDesignModule that directly reference the sidenav container and sidenav content. Use the Angular CLI commands in Listing 12-23.
ng g component superheroes-material-design/superhero-sidenav-container
ng g component superheroes-material-design/superhero-sidenav-content
Listing 12-23

Generate Components for Sidenav Container and Content

Use mat-sidenav-container in app-superhero-sidenav-container created with the command in Listing 12-24.
<mat-sidenav-container>
  <ng-content></ng-content>
</mat-sidenav-container>
Listing 12-24

Sidenav Container in app-superhero-sidenav-container

ng-content includes child components and app-superhero-sidenav-container content. All the contents of app-superhero-sidenav-container are transcluded under mat-sidenav-container.

This follows a similar approach in app-superhero-sidenav-content. Consider Listing 12-25.
<mat-sidenav-container>
  <mat-sidenav-content>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>
Listing 12-25

Sidenav Content in app-superhero-sidenav-content

The mat-sidenav-content component needs the container to be its immediate parent. Hence, we added another mat-sidenav-container. Child components and contents of app-superhero-content are transcluded to the ng-content in Listing 12-26.

Now, we have all the components ready to create the layout demonstrated in Figure 12-7. See the code in app.component.html. See Listing 12-26.
<app-superhero-sidenav-container>
    <app-superhero-sidenav #sidenav></app-superhero-sidenav>
    <app-superhero-sidenav-content>
        <router-outlet></router-outlet>
    </app-superhero-sidenav-content>
</app-superhero-sidenav-container>
Listing 12-26

AppComponent Code Resulting in Sidenav Layout

Figure 12-8 is a representation of the components in the layout.
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig8_HTML.jpg
Figure 12-8

Organizing sidenav container, content, and the sidenav

Using a Menu Button to Toggle sidenav

It is typical to toggle a sidenav: show or hide as needed. We may use the menu button next to the superhero title in the toolbar. As the user clicks the menu button, an event is raised. The event will be acted upon by the sidenav component. Consider a solution on how an event created by the menu button is received by sidenav (see Figure 12-9).
../images/475625_1_En_12_Chapter/475625_1_En_12_Fig9_HTML.jpg
Figure 12-9

Menu click toggling sidenav

First, let’s look at the implementation in the toolbar. Listing 12-27 adds a menu to the toolbar (superhero-toolbar-component.html). Notice the highlighted section, line 3, for the menu.
1. <mat-toolbar color="primary">
2.  <mat-toolbar-row>
3.      <mat-icon (click)="toggleForMenuClick()" class="menu">menu</mat-icon>
4.    Superhero
5.  </mat-toolbar-row>
6.  <mat-toolbar-row>
7.    List of Superheroes
8.  </mat-toolbar-row>
9. </mat-toolbar>
Listing 12-27

Toolbar with Menu Icon

The toggleForMenuClick() emits an event. In the Figure 12-9, notice the event marked with 1. Code for emitting the event is on line 11 in Listing 12-28.
1. import { Component, OnInit, EventEmitter, Output } from '@angular/core';
2. @Component({
3.  selector: 'app-superhero-toolbar',
4.  templateUrl: './superhero-toolbar.component.html',
5.  styleUrls: ['./superhero-toolbar.component.css']
6. })
7. export class SuperheroToolbarComponent implements OnInit {
8.  @Output() menuClick: EventEmitter<boolean> = new EventEmitter();
9.  toggleValue: boolean=true;
10.  toggleForMenuClick(){
11.    this.menuClick.emit(this.toggleValue);
12.    this.toggleValue = !this.toggleValue;
13.  }
14. }
Listing 12-28

Toolbar Component Raising the Event on Click Of Menu

The menuClick output event is of type EventEmitter. The generic type on EventEmitter is boolean. The toolbar component toggles a boolean variable each time the user clicks the menu. The event is emitted.

Next, AppComponent, the parent component to Superhero Toolbar, receives the event. In Listing 12-29, App.component.html ties the menuClick output event to a handler function. The handler function is named toggleSidenav().
<app-superhero-toolbar (menuClick)="toggleSidenav($event)">
  <!-- Removed code for brevity -->
</app-superhero-toolbar>
<app-superhero-sidenav-container>
    <app-superhero-sidenav #sidenav></app-superhero-sidenav>
    <app-superhero-sidenav-content>
        <router-outlet></router-outlet>
    </app-superhero-sidenav-content>
</app-superhero-sidenav-container>
Listing 12-29

AppComponent Handling the Event Raised by Toolbar

Note the #sidenav template reference variable representing the sidenav. Listing 12-30 shows the TypeScript code component (app.component.ts) handling the event raised by the toolbar.
@ViewChild("sidenav") sidenav: SuperheroSidenavComponent;
toggleSidenav(evt: EventEmitter<boolean>){
  evt ? this.sidenav.open() : this.sidenav.close();
}
Listing 12-30

AppComponent TypeScript Code Handling Event

The sidenav instance calls open() or close() functions toggling the sidenav. Notice the view child sidenav representing the template reference variable sidenav. The call open() or close() is #2 in Figure 12-9.

Finally, the superhero sidenav component implements opening and closing the sidenav. Listing 12-30 and Listing 12-31 show the open() and close() implementations in SuperheroSidenavComponent. Look at the template code in Listing 12-31.
<mat-sidenav mode="side" opened [position]="position" #sidenav>
     <!-- Removed code for brevity -->
</mat-sidenav>
Listing 12-31

SuperheroSidenavComponent Template

Note the template reference variable #sidenav representing mat-sidenav in Listing 12-32 that toggles the mat-sidenav component. The view child sidenav referenced in the TypeScript file component.
1. @Component({
2.  // Removed code for brevity
3. })
4. export class SuperheroSidenavComponent implements OnInit {
5.  @ViewChild("sidenav") sidenav: MatSidenav;
6.  @Input("position") position: string = "start";
7.  open() {
8.    this.sidenav.open();
9.  }
10.  close() {
11.    this.sidenav.close();
12.  }
13. }
Listing 12-32

SuperheroSidenavComponent with Code to Toggle sidenav

The open() and close() functions called from app.component.ts toggle mat-sidenav. They call the API on the mat-sidenav instance. Lines 7 to 9 in Listing 12-32 show the open() function implementation. Lines 10 to 12 show the close() function implementation.

Conclusion

The Angular Material components described in this chapter help you build navigation patterns for an Angular application. They use Material Design concepts and provide a greater user experience. The Angular Material component provides a title for the application and is a great location for actions and links to other pages in the application.

The chapter described placing actions and links on the toolbar. It covered using Angular Material themes and colors with the component. It explained sidenav, sample layouts, implementing the layout with Angular Material components, and handling events across components between the toolbar and the sidenav.

Exercise

In the Angular routing exercise, we added routing to the dinosaur application. We created two routes: /dino-list and /dinosaur/:dinosaurName.

Provide links to navigate to these pages in a sidenav position on the right.

Add a toolbar that shows a title: Dinosaur App. On the right corner of the toolbar, add a toggle sidenav link. Clicking the link should toggle the sidenav.

Reference

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.214.155