Mastering TypeScript 3 - Third Edition

SideNav component

In a similar manner, let's now create a component for the left-hand side navigation panel, as follows:

ng generate component sidenav  

This will create three source files in the app/sidenav directory as we have seen before, and register our component by modifying the app.module.ts file. The sidenav.component.html file is again a simple cut and paste from our existing HTML file, as follows:

<div id="mySidenav" class="sidenav"> 
  <a href="#">About</a> 
  <a href="#">Services</a> 
  <a href="#">Clients</a> 
  <a href="#">Contact</a> 
</div> 

The auto-generated SideNavComponent class needs to be updated with two new functions, as follows:

import { Component } from '@angular/core'; @Component( { selector: 'app-sidenav', templateUrl: './sidenav.component.html', ...