CODEWITHSUNDEEP
javascriptangular
Rams
Rams

Reputation: 2179

How to load component conditionally in angular on button click

I'm very new to Angular.

I want to load a child component conditionally within a component by clicking button. On button click, it should re-render the respective child component.

HTML code

<div class="tab">
  <button class="tablinks" (click)="onTabClick('0')">Transmit</button>
  <button class="tablinks" (click)="onTabClick('1')">Published</button>
  <button class="tablinks" (click)="onTabClick('2')">Bulk Transmit</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

TS file

tabIndex = 2 ;


  onTabClick(index){
        this.tabIndex = index;
   }

Upvotes: 1

Views: 11147

Answers (3)

Soumya Gangamwar
Soumya Gangamwar

Reputation: 1022

you are passing parameters 0,1,2 like strings and checking condition with === it' also checking type (means sting or number)

Possible solutions:

  1. place == instead of ===

  2. change argumens '1' to 1, '2' to 2

Upvotes: 1

Abhishek
Abhishek

Reputation: 1778

you have passed string as argument but checking numbers in tab. you can check on stackblitz link:

check stackblitz link here

<div class="tab">
  <button class="tablinks" (click)="onTabClick(0)">Transmit</button>
  <button class="tablinks" (click)="onTabClick(1)">Published</button>
  <button class="tablinks" (click)="onTabClick(2)">Bulk Transmit</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

Upvotes: 5

waqas
waqas

Reputation: 73

You are passing 0,1,2 as string in the onTabClick(), whereas in the .ts file you have tabIndex as integer.

Upvotes: 0

Related Questions