MatSidenav: Create a Search Sidebar

Now that we are able to page and sort our vehicle data (our mocked vehicle data anyway for now), let’s set up a sidebar where we can add some UI to search vehicles by category. And we will add in other search features as we go. Since we have been making pretty heavy use of Angular Material in this chapter, you might be asking yourself if there is an Angular Material component we can use for a Search Sidebar. As a matter of fact there is. We will be using the AM Sidenav

Import the MatSidenavModule

As you probably guessed by now, the first thing we need to do is import the required AM modules. Open angular-material.module.ts and make the following modifications.

FredsCars/src/app/angular-material.module.ts

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatSidenavModule } from '@angular/material/sidenav';

const angularMatModules = [
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatTableModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatSortModule,
  MatSidenavModule

]

@NgModule({
  imports: [
    angularMatModules
  ],
  exports: [
    angularMatModules
  ]
})
export class AngularMaterialModule { }

In the code above we imported the single AM module needed for SideNav; MatSidenavModule.

Update the Vehicles component HTML

Open the vehicles.component.html file and modify the code with the contents below.

FredsCars/src/app/vehicles/vehicles.component.html

<mat-sidenav-container>
  <mat-sidenav mode="side" #sidenav>
    <p><b>Search Panel</b></p>
  </mat-sidenav>

  <mat-sidenav-content>
    <p *ngIf="!vehicles">
      <mat-spinner style="margin: 0 auto;"></mat-spinner>
    </p>

    <div>
      <button mat-icon-button
              color="primary"
              (click)="sidenav.toggle()">
        <mat-icon>
          search
        </mat-icon>
      </button>
    </div>
    <table mat-table [dataSource]="vehicles"
           *ngIf="vehicles" matSort>

      <ng-container matColumnDef="vehicleType">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
        <td mat-cell *matCellDef="let item">
          <b>{{ item.vehicleType }}</b>
        </td>
      </ng-container>

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
        <td mat-cell *matCellDef="let item">
          {{ item.id }}
        </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
        <td mat-cell *matCellDef="let item">
          {{ item.status }}
        </td>
      </ng-container>

      <ng-container matColumnDef="year">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Year</th>
        <td mat-cell *matCellDef="let item">
          {{ item.year }}
        </td>
      </ng-container>

      <ng-container matColumnDef="make">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Make</th>
        <td mat-cell *matCellDef="let item">
          {{ item.make }}
        </td>
      </ng-container>

      <ng-container matColumnDef="model">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Model</th>
        <td mat-cell *matCellDef="let item">
          {{ item.model }}
        </td>
      </ng-container>

      <ng-container matColumnDef="color">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Color</th>
        <td mat-cell *matCellDef="let item">
          {{ item.color }}
        </td>
      </ng-container>

      <ng-container matColumnDef="price">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Price</th>
        <td mat-cell *matCellDef="let item">
          {{ item.price | currency:"USD" }}
        </td>
      </ng-container>

      <!-- No VIN on vehicles page.  We will show this on the details page -->
      <!-- Header Template -->
      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <!-- Row Template -->
      <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
    </table>

    <mat-paginator [pageSize]="5" [pageSizeOptions]="[3, 5, 10]">
    </mat-paginator>

  </mat-sidenav-content>
</mat-sidenav-container>

If you run the application and go to the Vehicles page you should see something similar to the following screenshot.

As you can see in the above screenshot, we have added a search icon. If you click on the search icon a sidebar will slide open on the left hand side of the browser as in the following screenshot.

Pretty spiffy right? Well, let’s take a look at the modifications we made in the html above in vehicles.component.html. It really didn’t take much. We just made basic use of MatSidebar in the AM component library.

Using MatSideNav

To use MatSideNav we need to use three components.

• <mat-sidenav-container>: acts as a structural container for the content and sidenav.
• <mat-sidenav-content>: represents the main content.
• <mat-sidenav>: represents the side content.

And that is what we did in vehicles.component.html above.

First we wrapped the existing content in a <mat-sidenav-content> element nested in a <mat-sidenav-container> element.

<mat-sidenav-container>
    <mat-sidenav-content>
        <!-- spinner -->
        <!-- vehicles table -->
    <mat-sidenav-content>
</mat-sidenav-container>

Then we add a <mat-sidenav> element inside the <mat-sidenav-container> above <mat-sidenav-content> which will hold our sidenav search panel. Also notice we give the <mat-sidenav> element a variable name using #sidenav. This way we will be able to access the sidebar by the variable name sidenav to toggle it open and closed.

<mat-sidenav-container>
    <mat-sidenav mode="side" #sidenav>
        <p><b>Search Panel</b></p>
    </mat-sidenav>

    <mat-sidenav-content>
        <!-- spinner -->
        <!-- vehicles table -->
    <mat-sidenav-content>
</mat-sidenav-container>

Next, we add a <div> element with a MatIconButton using the search glass icon in a MatIcon element right before the vehicles table inside the MatSidenav content area. We add a click event to the MatIconButton with the expression sidenav.toggle(). This accesses the sidebar through the variable name we gave it and toggles it open and closed using the MatSideNav.toggle() method.

<mat-sidenav-container>
    <mat-sidenav mode="side" #sidenav>
        <p><b>Search Panel</b></p>
    </mat-sidenav>

    <mat-sidenav-content>
        <!-- spinner -->

        <div>
            <button mat-icon-button
                  color="primary"
                  (click)="sidenav.toggle()">
            <mat-icon>
              search
            </mat-icon>
          </button>
        </div>
        <!-- vehicles table -->
    <mat-sidenav-content>
</mat-sidenav-container>

Tweak MatSidenav with CSS

Let’s make one last tweak with CSS before we move on.

When we click the search icon and open the sidenav, the text “Search Panel” is crammed up to the right edge of the search panel as you can see in the screenshot below.

Let’s fix that real quick. Open up vehicles.component.scss and make the modicication below in bold blue font.

FredsCars/src/app/vehicles/vehicles.component.scss

/*** existing content ***/
mat-sidenav {
  padding-right:10px;
}

Now there should be a little more space between the search panel content and the main content.

What’s Next

In this module we learned how to use the Angular Material Sidenav component and set up a sidebar area for a search panel we can toggle open and closed. In the next module we will add in some UI to select vehicle categories to search by using MatCheckbox.