Creating a side panel

We can now take a look at creating our left-hand side panel. A great resource for HTML elements, CSS styling, and animations is the W3Schools website ( The how-to section of the documentation provides a huge library of samples, including slideshows, modal boxes, progress bars, and responsive tables to name just a few. We will use a sample from the side navigation section, called Sidenav Push Content. This example shows how to create a side navigation screen that pushes the main content of the page over as it expands, instead of creating an overlay. We will start with some HTML added to our app.component.html file, as follows:

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

Get Mastering TypeScript 3 - Third Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.