'Change elements of one specific div of *ngFor

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


Solution 1:[1]

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>

Solution 2:[2]

 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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lautaro Lopez Ruiz
Solution 2 Binni kumari

Related Questions