Let's start our application updates by creating and integrating a board-list component that will display the list of all boards that are available. This component will query the /api/boards endpoint for data, and will serve as the main page for our site. This BoardListComponent can be created by using the Angular CLI as follows:

ng generate component board-list --skip-import  

This command will generate a /src/app/board-list directory, and also create the .ts, .html, .css, and .spec.ts files for our component. We will need to register this BoardListComponent as a module in the app.module.ts file as follows:

@NgModule({ 
    declarations: [ 
        ... existing components ... 
        BoardListComponent 
    ], 
    imports: [ 
    ... existing code ... 

Here, we have simply added the BoardListComponent class to the list of components in the declarations array. Remember that adding an entry here will allow us to include the <app-board-list> element within an HTML file in our application. We can now update the SecureComponent HTML file as follows:

<app-navbar></app-navbar> 
 
<app-sidenav></app-sidenav> 
 
<div id="sidenav_expand_panel" class="sidenav_expand" 
    (click)="showHideSideClicked()"> 
    <span id="show-hide-side-button" class="filter-button fa "> 
    </span> 
</div> 
 
<app-rightscreen (notify)='onNotifyRightWindow($event)'> 
</app-rightscreen> 
 
<div id="main" class="main-content-panel"> 
    <div> ... page title ... </div> 
    <div class="main-content"> 
        <app-board-list></app-board-list> 
    </div> 
</div> 

Here, we have the four main components that make up our main page, each referenced by their element names. The <app-navbar> element will render the navigation panel at the top of the screen, and the <app-sidenav> element will render the left-hand side panel that we will use for filtering. The <app-rightscreen> element will render the detail panel when a board is selected. We then have a <div> element that represents the main content panel of our page, and within this, the <app-board-list> element that will render the full list of boards.

Note that the previous HTML code sample is a stripped-down version of the full file, in order to show the placement of the main elements. The ... page title ... elements are not shown here. Accompanying these HTML files are the relevant CSS styles that are used for each element, as stored in the .css files for each component. Again, for the sake of brevity, we will not discuss these styles, or list them here, so please refer to the sample code for the full implementation.

We have also introduced a <div> element with an id of sidenav_expand_panel, in-between the <app-sidenav> and <app-rightscreen> elements. This is an upgraded version of the button we used earlier for expanding and collapsing the <app-sidenav> element, and is actually a panel that is 30px wide and fills the page from top to bottom. In order to animate this panel, and to compensate for the extra width, we will need to update the SecureComponent as follows:

showNavPanel() { 
    this.sideNav.showNav(); 
    document.getElementById('main').style.marginLeft = "280px"; 
    document.getElementById('sidenav_expand_panel') 
        .style.left = "250px"; 
} 
hideNavPanel() { 
    this.sideNav.closeNav(); 
    document.getElementById('main').style.marginLeft = "30px"; 
    document.getElementById('sidenav_expand_panel') 
        .style.left = "0px"; 
} 
showDetailPanel() { 
    this.rightScreen.openRightWindow(); 
    document.getElementById('main').style.transform = 
        "translateX(-100%)"; 
    document.getElementById('sidenav_expand_panel').style.transform = 
        "translateX(-100%)"; 
} 
hideDetailPanel() { 
    this.rightScreen.closeRightWindow(); 
    document.getElementById('main').style.transform = 
        "translateX(0%)"; 
    document.getElementById('sidenav_expand_panel').style.transform = 
        "translateX(0%)"; 
} 

Here, we have updated the showNavPanel function to include setting the style.left property of the element with an id of sidenave_expand_panel to 250px. This is very similar to our existing code that sets the style.marginLeft property for the main element. Likewise, within the hideNavPanel function, we are setting the style.left property for the sidenav_expand_panel to 0px. The showDetailPanel and hideDetailPanels have also been updated to include a style.transform property for the sidenav_expand_panel. Again, this code is similar to how we are animating the main element.

Our main page should now show the board-list component as follows: