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 >
  <div >

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


  <div *ngIf="showSelected">

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

CodePudding user response：

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   nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 1 </p>
    </div>
  </div>


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

2. ngIf with ngTemplate example

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


  <ng-template #otherComponent>
    <div   nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 2 </p>
    </div>
  </div>

3. ngSwitchCase example

  <div [ngSwitch]="selectedComponentName">
    <div *ngSwitchCase="'component1'"   nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 1 </p>
    </div>
    <div *ngSwitchCase="'component2'"   nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 2 </p>
    </div>
    <div *ngSwitchCase="'component3'"   nzTooltipTitle="United States" nzTooltipPlacement="top"  nz-tooltip (click)="ToggleButton()">
      <p> component 3 </p>
    </div>
  </div>

CodePudding user response：

Your HTML should be like:

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

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