Collapse/Expand nested div in Angular 6
16,534
If you have entire data loaded together then you have good news that it can be implemented in a very simple way -
You can play around Element Reference
. Nothing needs to be managed from ts
file.
in html
<div *ngFor="let venue of venues" class="level1" style="color: red"
(click)="ele.class = ele.class == 'showChildren' ? '' : 'showChildren'"
[ngClass]="{ hideChildren : ele.class !== 'showChildren' }">
Repeat the same for all parent
div
in CSS
.hideChildren>div{
display: none;
}
Here is the working copy- https://stackblitz.com/edit/angular-n43ihd
There are some more way to handle if the data is being fetched in Asynchronous fashion. Then these logic will move to ts
file.
Related videos on Youtube
Author by
Vithushan
Updated on June 09, 2022Comments
-
Vithushan almost 2 years
I am developing a schedule like structure using div. And my design looks like this.
What i want is when loading, only 1st level should be displayed (all venues) and when clicking on venue its immediate child should be displayed and so on. Is there any way to do so. my html is:
<div class="div-table"> <div class="div-table-row"> <div class="div-header-col" style="visibility: hidden;">A</div> <div *ngFor="let date of dates" class="div-date-col">{{date | date:'d E'}}</div> </div> <!-- level1 --> <div *ngFor="let venue of venues" class="level1" style="color: red"> <div class="div-table-row-level1" > <div class="div-header-col">{{venue.name}}</div> <div *ngFor="let x of dates" class="div-event-level1-col"></div> </div> <!-- level2 --> <div *ngFor="let category of venue.categories" class="level2" style="color: blue"> <div class="div-table-row-level2"> <div class="div-header-col" style="padding-left: 10px">{{category.name}}</div> <div *ngFor="let x of dates" class="div-event-level2-col"></div> </div> <!-- level3 --> <div *ngFor="let asset of category.assets" class="level3" style="color: green"> <div class="div-table-row-level3"> <div class="div-header-col" style="padding-left: 20px">{{asset.name}}</div> <div *ngFor="let x of dates" class="div-event-level3-col assest-hover" "></div> </div> </div> </div> </div> </div>
My data for the table(div) is :
[ { "id":1, "name":"venue1", "categories":[ { "id":1, "name":"cat1", "assets":[ { "id":1, "name":"assest1" }, { "id":2, "name":"assest2" } ] }, { "id":2, "name":"cat2", "assets":[ { "id":3, "name":"assest3" }, { "id":4, "name":"assest4" } ] } ] }, { "id":2, "name":"venue2", "categories":[ { "id":3, "name":"cat3", "assets":[ { "id":5, "name":"assest5" }, { "id":6, "name":"assest6" } ] }, { "id":4, "name":"cat4", "assets":[ { "id":7, "name":"assest7" }, { "id":8, "name":"assest8" } ] } ] },{ "id":3, "name":"venue3", "categories":[ { "id":5, "name":"cat5", "assets":[ { "id":9, "name":"assest9" }, { "id":10, "name":"assest10" } ] }, { "id":6, "name":"cat6", "assets":[ { "id":11, "name":"assest11" }, { "id":12, "name":"assest12" } ] } ] } ]
-
Vithushan over 5 yearsThat i had tried using css. But the challenge is how to display the correct child of the clicked parent.
-
Vithushan over 5 yearsThanks. This work fine for expanding. But will it be working with COLLAPSE function. I will work around a solution to fix that.
-
Sunil Singh over 5 yearsUpdated the answer with collapse option. Note : css change is also changed to handle closest children.
-
Travel and code enthousiast about 4 yearsI finally got it working like this
(click)="ele.class = (ele.class == 'showChildren') ? 'hideChildren' : 'showChildren'" [ngClass]="{ hideChildren : ele.class == 'showChildren', showChildren : ele.class == 'hideChildren'}"
. Thnx anyway!