How to hide Angular typescript current div and show another div

Question

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

CSS display:none for one of the classes and display: block for the other then JS to toggle two classes DOMElement.classlist.toggle(1stclass, 2ndclass)? Could that work — Kaleba KB Keitshokile
– Kaleba KB Keitshokile, Commented Apr 25, 2022 at 9:59

Norbert Bartko · Accepted Answer · 2022-04-25 09:51:47Z

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

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>

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>

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>

Muthulakshmi M · Accepted Answer · 2022-04-25 13:05:03Z

0

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>

answered Apr 25, 2022 at 13:05

Muthulakshmi M

8038 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to hide Angular typescript current div and show another div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related