CODEWITHSUNDEEP
javascriptcssangular
Rene Trujillo
Rene Trujillo

Reputation: 389

Show/Hide element on click

I'm trying to toggle an element to show/hide when I click on the title. So far I have this approach

<div class="parent" (click)="status=!status" [ngClass]="status ? 'hide' : 'display'">
   <div class="child">
     <p>Info to show or hide</p>
   </div>
</div>

On CSS file I have this

.hide .child {
  display: none;
}

This works fine for what I need when I have one element. But I want to display several of this items with an *ngFor. When I do that, then variable status is shared and clicking on any of the other elements will toggle all of them. Since the creation of elements is dynamic, is there any way to limit the scope of status variable to just that element? Or is there a better approach to this?

Upvotes: 1

Views: 200

Answers (2)

Harun Or Rashid
Harun Or Rashid

Reputation: 5927

In yours component.ts file, add property status in each array element and assign true to element.status.

Then loop over the elements of array using ngFor and use element.status to toggle specefic element as below in your component.html file: 

<div *ngFor="let element of myArray" class="parent" (click)="element.status=!element.status" [ngClass]="element.status ? 'hide' : 'display'">
    <div class="child">
        <p>Info to show or hide</p>
    </div>
</div>

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

YOu need a status variable in each object

<div *ngFor="let item of items" class="parent" (click)="item.status=!item.status" [ngClass]="item.status ? 'hide' : 'display'">
   <div class="child">
     <p>Info to show or hide</p>
   </div>
</div>

Upvotes: 1

Related Questions