Change elements of one specific div of *ngFor

Issue

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"' class="list">
  <div class="form-listItem" *ngFor="let room of roomList">
    {{ room }}
    <button class="formBtn" (click)="enterPassword($event.target)" id="{{ room }}">Join</button>
    <div class="joinRoomPasswordContainer" id="{{ room }}-">
      <input class="joinRoomPassword" type="password" placeholder="********">
      <button class="joinRoomBtn">
        <img class="rightArrow" src="/assets/rightArrow.svg" alt="">
      </button>
    </div>
  </div>
</div>

Solution

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

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

Answered By - Lautaro Lopez Ruiz