[英]How to display the data based on the user click in angular
I have added tool bar and side nav bar using angular material in app.component.html.我在 app.component.html 中使用 angular 材料添加了工具栏和侧导航栏。
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.在 UI 中,它如下所示。
As of now I have only one component in my app ie 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.当用户单击任何按钮时,我想在这些按钮右侧显示相应的 html 模板。
How can I implement this?我该如何实施? I appreciate your help.我感谢您的帮助。
There is multiple ways to implement this, depending on your app architecture and what's exactly your use case.有多种方法可以实现这一点,具体取决于您的应用架构和您的用例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.