Mastering TypeScript 3 - Third Edition

Creating an overlay

We can now turn our attention to the second page, which will slide in from the right, when we click on the Detail button. Our HTML snippet is as follows:

<div id="mySidenav" class="sidenav"> 
... existing sidebar ... 
</div> 
 
<div id="myRightScreen" class="overlay"> 
    <button class="btn button-no-borders"  
    (click)="closeClicked()"> 
        <span class="fa fa-chevron-left"></span> 
    </button> 
    <div class="overlay-content"> 
        <h1>page 2</h1> 
    </div> 
</div> 
... existing main panel ... 
<div id="main" class="main-content-panel"> 

Here, we have inserted a <div> element with an id of myRightScreen, and specified the CSS class of overlay. This is a simple <div> element that contains a button at the top, with a click handler of closeClicked, and an ...