How To Show/hide Dynamic Id Of Div's In Angular2

Here a loop of kpiName is executed and inside loops of subRegion also executed. As a result 4 divs of class='col-xs-2' are created and inside it two div(clickable divs inside filte

Solution 1:

Ok, so as smnbbrv proposes, something like :

Component file :

displayDiv: boolean = false;
loadFilterData(index: number, div: string){
   this.displayDiv = !this.displayDiv;
}

HTML file :

<div *ngIf="displayDiv"class="col-xs-12 rmpm "id="filteredDataSubRegion{{index}}">
...
</div><div *ngIf="!displayDiv"class="col-xs-12 rmpm "id="filteredDataProductLine{{index}}">
...
/<div>

Does this help you ?

Re. If I understand you well, you have 4 divs :

A
  A1
    A11 (click)-> show only A21 
    A12 (click)-> show only A22
  A2
    A21
    A22
B (...)
C (...)
D (...)

Is that right ?

If so, you have several possibilities to manage your displays. By example, you can use 2 variables : displayBlock, displaySubBlock.

displayBlock: boolean = false;
displaySubBlock: boolean = false;

loadFilterData(index: number, div: string){
   this.displayBlock = index;
   this.displaySubBlock = !this.displaySubBlock;
}

<div *ngIf="displayBlock === i && displaySubBlock"class="col-xs-12 rmpm "id="filteredDataSubRegion{{index}}">
...
</div>
<div *ngIf="displayBlock === i && !displaySubBlock"class="col-xs-12 rmpm "id="filteredDataProductLine{{index}}">
...
</div>

Code not tested, just for the idea.