How to change component when click on button angular

user_12731613 0
Viewed 6998

I am trying to create this dashboard and i want to know how to change one component when a menu link is clicked? This is dashboard

I split it in 3 components like that

<div id="wrapper">
  <app-dashboard-menu></app-dashboard-menu>
  <div id="content-wrapper" class="d-flex flex-column">
    <div id="content">
      <app-dashboard-topbar></app-dashboard-topbar>
      <app-dashboard-content></app-dashboard-content>
    </div>
  </div>
</div>

i want to be know how can i add (onclick) to a menu item and change from to lets say and keep the same layout. Just to be able to change only dashboard content to any other component i create

angular8 angular
1 Answers

if you already had finished routing, add this property into html button tag

<button type="button"  routerLink="/content">Content</button>

or, add like this in component.ts

<button type="button" (click)="btnClick()">Content</button>    

import { Router } from '@angular/router';

btnClick() {
        this.router.navigateByUrl('/content');
};
user_105643120
Related