CODEWITHSUNDEEP
htmlcssangulartypescript
Saeiko
Saeiko

Reputation: 3

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>

Upvotes: 0

Views: 56

Answers (2)

Binni kumari
Binni kumari

Reputation: 358

 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.

Upvotes: 1

Lautaro Lopez Ruiz
Lautaro Lopez Ruiz

Reputation: 144

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>

Upvotes: 0

Related Questions