How to display the data based on the user click in angular

Question

I have added tool bar and side nav bar using angular material in app.component.html.

app.component.html

<div>
   <mat-sidenav-container class="main-container">
     <mat-sidenav #sideBarRef opened mode="side" [(opened)]='isSideBarOpen'>
     <mat-nav-list>
       <a mat-list-item href="#"> Home </a>        
       <a mat-list-item href="#"> Project Updates </a>        
       <a mat-list-item href="#"> General Updates </a>
       <a mat-list-item href="#"> Help </a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
        <button (click)='sideBarRef.toggle()'><mat-icon>menu</mat-icon></button>
           My Application
     </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>
</div>

In the UI it looks like below.

As of now I have only one component in my app i.e. application component. Now I want to develop different components for each of the buttons which are on left side in the home page. When user clicks on any button I want to show the corresponding html template right to those buttons.

How can I implement this? I appreciate your help.

Answer 1

There is multiple ways to implement this, depending on your app architecture and what's exactly your use case.

• If when user click on A it changes both data and display, like an admin interface allowing to manage users, groups, application on 3 side buttons, use a in your main comp, create one route/comp per display and router the user using router-link for each button.
• If the display stay the same, but the button simply change the underlying data, use a smart component to built your view, 1 presentation component to build your left panel, Observable of your data filtered by which button is clicked using input/output and 1 presentation component to make the main display using the data sent by the smart comp. Alternatively use a state (ngrx), actions for the click, selectors to provide the data to the main component.