I'm very new to Angular.

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

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

I'm very new to Angular.

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

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

• javascript
• angular

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

3 Answers 3

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>

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

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