How to change component when click on button angular

Question

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

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

Sanka Sanjeeva · Accepted Answer · 2020-03-31 16:53:32Z

5

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');
};

answered Mar 31, 2020 at 16:53

Sanka Sanjeeva

3,85830 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cosmin Mihalache Over a year ago

Thanks but i used router outlet and declared them as children of the dashboard component

Sanka Sanjeeva Over a year ago

yeah, also the router outlet need is need for my answer. sorry, I couldn't mention it before

Collectives™ on Stack Overflow

How to change component when click on button angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related