how to show/hide dynamic id of div's in angular2

Question

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 filter class) are created having dynamic Id as id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" which onclick calls some function.

The requirement is when corresponding id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" is clicked show and hide id="filteredDataSubRegion{{index}}" and id="filteredDataProductLine{{index}}" of corresponding 4 divs(a,b,c,d).

app.component.ts

kpi = [a, b, c, d];
subRegion = ['China', 'India', 'Japan', 'Korea', 'SEATH'];
productLine = ['6A', '7T', '9T', 'UV', 'BA'];

    loadFilterData(index,type){
    console.log(index);
//---------------------angular2 implementation???------------------
     if (type === 'subregion') {     
              // $('#filteredDataSubRegion' + index).show();  
              // $('#filteredDataProductLine' + index).hide();
          } else {
              // $('#filteredDataSubRegion' + index).hide();
              // $('#ffilteredDataProductLine' + index).show();
          }
    }

app.component.html

<div class="col-xs-2 " *ngFor="let kpi of kpiName;let index=index;">
  <div class="col-xs-12 rmpm bottomSectionKpis">
    <div class="col-xs-12 rmpm filter">
      <div class="col-xs-6 rmpm" id="filteredTabSubRegion{{index}}" (click)="loadFilterData(index,'subregion')" [ngClass]="{'activex': act}">Sub Region</div>
      <div class="col-xs-6 rmpm" id="filteredTabProductLine{{index}}" (click)="loadFilterData(index,'productline')" [ngClass]="{'activex': activ}">Product Line</div>
    </div>
    <div class="col-xs-12 rmpm filterTable">
      <div class="col-xs-12 rmpm " id="filteredDataSubRegion{{index}}" style="display:block">
        <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;">
          <div class="col-xs-2 rmpm filteredDataIcon">
            <i class="fa fa-circle" aria-hidden="true"></i>
          </div>
          <div class=" col-xs-7 rmpm filteredDataName">{{subRegion[k]}}</div>
          <div class="col-xs-3 rmpm filteredDataShift text-center">Shift</div>
        </div>
      </div>
      <div class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}" style="display:none">
        <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;">
          <div class="col-xs-2 rmpm filteredDataIcon">
            <i class="fa fa-circle" aria-hidden="true"></i>
          </div>
          <div class=" col-xs-7 rmpm filteredDataName">{{productLine[k]}}</div>
          <div class="col-xs-3 rmpm filteredDataShift text-center">Shift</div>
        </div>
      </div>
    </div>
  </div>
</div>

Hi, not sure to understand what you need, but have you tried $("#filteredTabSubRegion_"+index).show(); or $("#filteredTabSubRegion_"+index).hide(); ? — vanessa, Oct 20 '17 at 19:08
`*ngIf` in combination with `(click)`? Please spend some time on Angular tutorials before coming to SO — smnbbrv, Oct 20 '17 at 19:10
I am not using jquery, need to do it in angular2 way. The question is 4 divs are created(All containing same data but different id),that contains two div(clickable) are created and inside it their are two divs one visible and other hidden. On click of one first div a div is shown and other hidden and vice-versa. — Manzer Hashmi, Oct 20 '17 at 19:14
Here, I am getting difficulty to bind click event to that corresponding divs separately. — Manzer Hashmi, Oct 20 '17 at 19:24

vanessa · Answer 1 · 2017-10-20T19:57:16.743

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.

edited Oct 20 '17 at 19:57

answered Oct 20 '17 at 19:24

vanessa

419
1
4
13

Using your way, every 4 div are behaving the same way, ie, click on first div button show and hide content of all 4 divs. – Manzer Hashmi Oct 20 '17 at 19:30
A loop of kpi is executed at start of the code and thus, four divs are created. – Manzer Hashmi Oct 20 '17 at 19:31
I guess, this is not the desired answer. – Manzer Hashmi Oct 20 '17 at 19:43
Yes, you understand well, but code doesnot works and you forget the fact that id="filteredDataSubRegion{{index}}" is bydefault not hidden. – Manzer Hashmi Oct 20 '17 at 20:23
change "displaySubBlock" to true in this case – vanessa Oct 20 '17 at 20:31
Sorry, but it not worked. I have a plunker where you can understand the problem.Here is plunker link, https://plnkr.co/edit/E3ykbvXIPtQwVqe9cnQA?p=preview – Manzer Hashmi Oct 21 '17 at 19:40

how to show/hide dynamic id of div's in angular2

app.component.ts

app.component.html

1 Answers1

Linked