CODEWITHSUNDEEP
angulartypescript
core114
core114

Reputation: 5325

How to hide Angular typescript current div and show another div

I'm tried to hide Angular typescript current div and show another div but its not working correctly dose anyone know some solution?

here the code

html

<div class="m-t-10">
  <div >

    <div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 1 </p>
    </div>
  </div>


  <div *ngIf="showSelected">

    <div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 2 </p>
    </div>
  </div>

.ts

showSelected: boolean;    

constructor() {
  this.showSelected = false;
}

ToggleButton() {
  this.showSelected = !this.showSelected;
}

Upvotes: 0

Views: 213

Answers (2)

Muthulakshmi M
Muthulakshmi M

Reputation: 777

Your HTML should be like:

<div *ngIf="!showSelected">
<div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
  <p> component 1 </p>
</div>

<div *ngIf="showSelected">
<div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
  <p> component 2 </p>
</div>

Upvotes: 0

Norbert Bartko
Norbert Bartko

Reputation: 2632

You can use a simple ngIf on both component wrappers, or ngIf with ngTemplate. When you have more than 2 possible components you can use a ngSwitch

  1. ngIf example
  <div *ngIf="!showSelected">
    <div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 1 </p>
    </div>
  </div>


  <div *ngIf="showSelected">
    <div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 2 </p>
    </div>
  </div>
  1. ngIf with ngTemplate example
  <div>
    <div *ngIf="!showSelected; else otherComponent" class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 1 </p>
    </div>
  </div>


  <ng-template #otherComponent>
    <div class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 2 </p>
    </div>
  </div>
  1. ngSwitchCase example
  <div [ngSwitch]="selectedComponentName">
    <div *ngSwitchCase="'component1'" class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 1 </p>
    </div>
    <div *ngSwitchCase="'component2'" class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 2 </p>
    </div>
    <div *ngSwitchCase="'component3'" class="circle-us"  nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 3 </p>
    </div>
  </div>

Upvotes: 2

Related Questions