How to load component conditionally in angular on button click

Question

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

You are passing string('0') and checking with a number 0, either make === to == or pass number on both sides. — Puneet Uppal
– Puneet Uppal, Commented Jun 14, 2019 at 9:54

Abhishek · Accepted Answer · 2019-06-14 11:00:19Z

5

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>

edited Jun 14, 2019 at 11:00

answered Jun 14, 2019 at 10:13

Abhishek

1,7782 gold badges16 silver badges26 bronze badges

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

Comments

Giulio Caccin · Accepted Answer · 2019-11-16 11:04:46Z

1

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

Possible solutions:

place == instead of ===
change argumens '1' to 1, '2' to 2

edited Nov 16, 2019 at 11:04

Giulio Caccin

3,0686 gold badges38 silver badges59 bronze badges

answered Jun 14, 2019 at 11:02

Soumya Gangamwar

1,0324 gold badges20 silver badges46 bronze badges

1 Comment

M. Al Jumaily Over a year ago

The best explanation for differentiating between == and ===.

waqas · Accepted Answer · 2019-06-14 09:59:37Z

0

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

answered Jun 14, 2019 at 9:59

waqas

737 bronze badges

Collectives™ on Stack Overflow

How to load component conditionally in angular on button click

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related