How to dynamic component change when the button is pressed

Question

I have a parent component and a child component is displayed in it by default, how do I make it so that when I click on the Timeline, instead of my pie chart component, another component with a different diagram is displayed

enter image description here

parent.component.html

        <div class="portfolio__column">
          <ul class="portfolio__select">
            <li class="portfolio__select-item">
              <a routerLinkActive="active" [routerLink]="['/dashboard']">Breakdown</a>
            </li>
            <li class="portfolio__select-item">
              <a routerLinkActive="active" [routerLink]="['/dashboard']">Timeline</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="portfolio__row">
        <app-doughnut-chart></app-doughnut-chart>
      </div>

Answer 1

You can have a routerPath like

const routes: Routes = [
  { path: 'line-chart', component: LineChartComponent },
  { path: 'doughnut-chart', component: DoughnutChartComponent }
];
@NgModule({
  imports:      [ BrowserModule, FormsModule,RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, DoughnutChartComponent,LineChartComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

And your appComponent like

<ul class="portfolio__select">
   <li class="portfolio__select-item">
      <a routerLinkActive="active" [routerLink]="['/line-chart']">Breakdown</a>
   </li>
   <li class="portfolio__select-item">
       <a routerLinkActive="active" [routerLink]="['/doughnut-chart']">Timeline</a>
   </li>
</ul>
<router-outlet></router-outlet>

Then, when your url is like localhost:4200/doughnut-chart' you see the DougnnutChartComponent and when is localhost:4200/line-chart' you see the LineChartComponent

Or you can take another approach that is not change the "url", simply use a variable "typeChart". In your .ts you define

typeChart:string='line'

And your .html like

    <ul class="portfolio__select">
       <li class="portfolio__select-item">
          <a [class.active]="typeChart=='line' (click)="typeChart='line' >Breakdown</a>
       </li>
       <li class="portfolio__select-item">
           <a [class.active]="typeChart=='doughnut' (click)="typeChart='doughnut'">Timeline</a>
       </li>
    </ul>
<app-doughnut-chart *ngIf="typeChart=='doughnut'></app-doughnut-chart>
<app-line-chart *ngIf="typeChart=='line'></app-line-chart>

Well, this last approach can be if you create a app-dashboard-component like

@Input()typeChart="line" //<--in .ts

<app-doughnut-chart *ngIf="typeChart=='doughnut'></app-doughnut-chart>
<app-line-chart *ngIf="typeChart=='line'></app-line-chart>

And your mainComponent

   <ul>
    ...
   </ul>
   <app-dashboard-component [typeChart]="typeChart">
   </app-dashboard-component>

In the first approach you use router, in the second one you use *ngIf structural directive. See that are two completely different approaches