Change elements of one specific div of *ngFor-CodePudding

I have this layout. What I want to do is, when a button Join is clicked, hide that button and show an input field in its place like this, and if another button is clicked the first one returns to its normal state and another input field is displayed like this.

I'm working with Angular 13. Here is a code snippet of the concerned div.

<div *ngIf='show === "default"' >
  <div  *ngFor="let room of roomList">
    {{ room }}
    <button  (click)="enterPassword($event.target)" id="{{ room }}">Join</button>
    <div  id="{{ room }}-">
      <input  type="password" placeholder="********">
      <button >
        <img  src="/assets/rightArrow.svg" alt="">
      </button>
    </div>
  </div>
</div>

CodePudding user response：

you could add a property for room object, some like 'joined', then add ngIf directive for view change

<button  *ngIf="!room.joined" (click)="enterPassword($event.target); room.joined = true" id="{{ room 
}}">Join</button>
<div  id="{{ room }}-" *ngIf="room.joined">
  <input  type="password" placeholder="********">
  <button >
    <img  src="/assets/rightArrow.svg" alt="">
  </button>
</div>

CodePudding user response：

 In the Ts file you initialize two variable with boolean type true and false.
and create write a fun like:-
func1(){
this.a = true;
this.b = false;
}

call this function on the button and the panel you want to open on click that div give - *ngIf with these two variable.