How to toggle two divs when clicked while in a loop in angular4

Question

It is a reference to the question asked how to show/hide dynamic id of div's in angular2.

I have prepared a plunker which will display the problem which i am facing? here, I want to toggle btn1 and btn2 separately in the 4 boxes. The requirement is when in box1, the btn1 is clicked , 'subRegion' should show & 'productLine' should hide; when btn2 is clicked,'productLine' should show and 'subRegion' should hide. Similarly, among box2,box3,box4. Here, clicking btn2 from box1(one among 4 boxes)is displaying the content in every boxes. How to fix that?

Here is plunker link, https://plnkr.co/edit/E3ykbvXIPtQwVqe9cnQA?p=preview

code:-

@Component({
  selector: 'my-app',
  template: `
 <div class="col-xs-3 rmpm" *ngFor="let kpi of kpiName;let index=index;">
 <div class="col-xs-12 rmpm" style="height:80px;border:1px solid;width:70px;padding:0px;margin:0px;">A</div>
 <div class="col-xs-12 rmpm" style="border:1px solid;width:70px;margin-top:10px;padding:0px;margin:0px;">

  <div class="col-xs-12 rmpm" style="border:1px solid;padding:0px;margin:0px;">

   <!--btn 1 should be by default active and have blue color -->

  <div class="col-xs-6 rmpm" id="btn1{{index}}"  (click)="showsubid(index,'btn1')" style="padding:0px;margin:0px;border-right:1px solid;">btn1</div>
   <div class="col-xs-6 rmpm" id="btn2{{index}}" (click)="showproid(index,'btn2')"  style="padding:0px;margin:0px;">btn2</div>
  </div>

 <!--By default will be displayed when btn1 is active,this will show when btn1 is clicked and hide when btn2 is clicked -->

  <div class="col-xs-12" id="subid{{index}}" style="padding:0px;margin:0px;" >
     <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;" style="padding:0px;margin:0px;">
     <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData()' style="padding:0px;margin:0px;border-top:1px solid">{{subRegion[k]}}</div>
 </div>
 </div>

 <!--this will show when btn2 is clicked and hide when btn1 is clicked -->

    <div class="col-xs-12"  id="proid{{index}}"   style="padding:0px;margin:0px;" *ngIf="pro == 0" >
     <div class="col-xs-12 rmpm filteredDataRow"  *ngFor="let subDta of productLine;let k = index;" style="padding:0px;margin:0px;" >
     <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData()' style="padding:0px;margin:0px;border-top:1px solid">{{productLine[k]}}</div>
 </div>
  </div>
</div>
</div>
  `,
})
export class App {
    kpiName = ['s', 'TO ','d','e'];
  subRegion = ['Ch', 'Ia', 'Ja', 'Ke', 'SE'];
   productLine = ['6A', '7T', '9T', 'UV', 'BA'];
pro: any;
  constructor() {

  }

showsubid(index,btnid){
  alert(index)
   alert(btnid+index)
}
showproid(index){
   alert(index)
    // alert(id+index)
    this.pro = index;
}
}

As for best practice, if you have more than 5 lines in your component template, use a separate html file. In that way, your component will look cleaner and easier to understand. — Junius, Oct 21 '17 at 22:40

score 0 · Accepted Answer · answered Oct 21 '17 at 20:12

As per your request. On clicking the button the specific content of that section should be displayed. I have updated the code: https://plnkr.co/edit/TEbI45K2TZkRYd84jYft?p=preview

    //our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
 <div class="col-xs-3 rmpm" *ngFor="let kpi of kpiName;let index=index;">
 <div class="col-xs-12 rmpm" style="height:80px;border:1px solid;width:70px;padding:0px;margin:0px;">A</div>
 <div class="col-xs-12 rmpm" style="border:1px solid;width:70px;margin-top:10px;padding:0px;margin:0px;">

  <div class="col-xs-12 rmpm" style="border:1px solid;padding:0px;margin:0px;">

   <!--btn 1 should be by default active and have blue color -->

  <div class="col-xs-6 rmpm" id="btn1{{index}}"  (click)="showsubid(index,'btn1')" style="padding:0px;margin:0px;border-right:1px solid;">btn1</div>
   <div class="col-xs-6 rmpm" id="btn2{{index}}" (click)="showproid(index,'btn2')"  style="padding:0px;margin:0px;">btn2</div>
  </div>

 <!--By default will be displayed when btn1 is active,this will show when btn1 is clicked and hide when btn2 is clicked -->

  <div class="col-xs-12" id="subid{{index}}" style="padding:0px;margin:0px;" >
     <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;" style="padding:0px;margin:0px;">
     <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData(index ,kpiName[index],subRegion[k])' style="padding:0px;margin:0px;border-top:1px solid">{{subRegion[k]}}</div>
 </div>
 </div>

 <!--this will show when btn2 is clicked and hide when btn1 is clicked -->

    <div class="col-xs-12"  id="proid{{index}}"   style="padding:0px;margin:0px;" *ngIf="pro === index" >
     <div class="col-xs-12 rmpm filteredDataRow"  *ngFor="let subDta of productLine;let k = index;" style="padding:0px;margin:0px;" >
     <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData()' style="padding:0px;margin:0px;border-top:1px solid">{{productLine[k]}}</div>
 </div>
  </div>
</div>
</div>
  `,
})
export class App {
    kpiName = ['s', 'TO ','d','e'];
  subRegion = ['Ch', 'Ia', 'Ja', 'Ke', 'SE'];
   productLine = ['6A', '7T', '9T', 'UV', 'BA'];
pro: number;
  constructor() {
this.pro= [];
  }
loadSubRegionData(index,kpi,subreg){
  alert(index);
  alert(subreg);
}
showsubid(index,btnid){
  alert(index)
   alert(btnid+index)
}
showproid(index){
   alert(index)
    // alert(id+index)
    this.pro = index;
}
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

There was a small mistake of considering variable pro as a boolean. If you consider it as a number and compare it with the index then it will do what you need.

The content should toggle when btn1 and btn2 is clicked of the same box.Please, check my plunker. — Manzer Hashmi, Oct 21 '17 at 20:19
Just to get a clarification. btn1 to hide and btn2 to show, correct? — user2842256, Oct 21 '17 at 20:22
In your plunker, the toggle is among btn2 of other boxes. The requirement is when in box1, the btn1 is clicked , 'subRegion' should show & ''and 'productLine' should hide; when btn2 is clicked,'productLine' should show and 'subRegion' should hide. Similarly, among box2,box3,box4. — Manzer Hashmi, Oct 21 '17 at 20:23
Have a look at my plunk and see how btn1 and btn2 reacts. The only problem in my plunk is, clicking in one box, changing content of other boxes. — Manzer Hashmi, Oct 21 '17 at 20:25
I have updated the code. Please check now: https://plnkr.co/edit/lXAnIcsOoKpTkivFrzRO?p=preview — user2842256, Oct 21 '17 at 20:36
Just to add you need to maintain the click status separately for each set of buttons. — user2842256, Oct 21 '17 at 20:39
Thanks a lot, can you tell me how to check the id of button which is clicked.? — Manzer Hashmi, Oct 21 '17 at 20:45
You are already passing the button Id as a parameter in both the click events just use that. I have updated the sample with the alert. https://plnkr.co/edit/Xt7lg96IjvRhszTytrVU?p=preview. Do mark as answered as it would help others. — user2842256, Oct 21 '17 at 20:57
Please check the id by inspecting, its a dynamic id and it is different from each button. — Manzer Hashmi, Oct 21 '17 at 21:11
I have added the button id alert to the code as you need. You are making the button Ids using a constant string plus the index so you need to do the same in your ts. https://plnkr.co/edit/Xt7lg96IjvRhszTytrVU?p=preview — user2842256, Oct 21 '17 at 21:20
loadSubRegionData(index,kpi,subreg){ alert(index); alert(subreg); // for index 0,1,2---- onclick of 'ch' show nwDts[0],onclick of 'la' show nwDts[1] at box1,box2 respectively. } — Manzer Hashmi, Oct 21 '17 at 21:40
I am not able to understand the following `loadSubRegionData(index,kpi,subreg){ alert(index); alert(subreg); // for index 0,1,2---- onclick of 'ch' show nwDts[0],onclick of 'la' show nwDts[1] at box1,box2 respectively. }` The ids are displayed and the buttons are also working as needed. Can you explain what you want? — user2842256, Oct 22 '17 at 09:28

How to toggle two divs when clicked while in a loop in angular4

1 Answers1