How to concatenate variable with hard coded value inside click event in Angular4

Question

I want to add accord with value of i inside click event. my same logic is working in *ngif="" and interpolation mark but it is not working in (click)="" event.

<div class="popCheckListDropMain" *ngFor="let srkey of srDataList; let i = index">
  <h4 (click)="'accord'+i=!'accord'+i">{{srkey.key}} </h4>
  <ul class="popCheckListDropList" *ngIf="'accord'+i">
    <li *ngFor="let list of srkey.list">
        <div class="customCheckBox">
            <input type="checkbox" id="{{list.name}}" name="{{list.name}}" [(ngModel)]="list.isSelected"
            >
            <div class="check"></div>
        </div>
        <label for="{{list.name}}" >{{list.name}} {{list.isSelected}} </label>
    </li>
  </ul>

What are you trying to achieve? 'accord'+i =!... is not a vliad expression — hansmaad
– hansmaad, Commented Aug 25, 2017 at 12:06
Sorry if I read this wrong but what you want to accomplish here? If you put 'accord+i' onClick() your *ngIf() will be always true? — Swoox
– Swoox, Commented Aug 25, 2017 at 12:06
@Swoox my comment trying to explain his expected behavior wasn't an example of clarity either :) — Mozgor
– Mozgor, Commented Aug 25, 2017 at 12:16

FAISAL · Accepted Answer · 2017-08-25 12:09:12Z

1

In your ts, add a variable to store every item's state:

toggleAccordions: any = {};

Change you template to following:

<div class="popCheckListDropMain" *ngFor="let srkey of srDataList; let i = index">
  <h4 (click)="toggleAccordions['accord'+i]=!toggleAccordions['accord'+i]">{{srkey.key}} </h4>
  <ul class="popCheckListDropList" *ngIf="toggleAccordions['accord'+i]">
    <li *ngFor="let list of srkey.list">
        <div class="customCheckBox">
            <input type="checkbox" id="{{list.name}}" name="{{list.name}}" [(ngModel)]="list.isSelected"
            >
            <div class="check"></div>
        </div>
        <label for="{{list.name}}" >{{list.name}} {{list.isSelected}} </label>
    </li>
  </ul>
</div>

answered Aug 25, 2017 at 12:09

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mozgor Over a year ago

Was writting kinda the same. Ugly as hell and not what I'd call 'best practise', but an easy way to fix OP's problem.

Mozgor Over a year ago

By the way, for a toggled content, *ngIf should not be used. Pick [hidden]="whatever_condition" instead

RajnishCoder Over a year ago

thanks a lot its working but I also want to know clean and proper way to do this.

FAISAL Over a year ago

@RajnishRajput this is a clean way, you have to store state of each accordion, otherwise you just have same state for all of them. Please upvote and mark accepted if it helped :)

FAISAL Over a year ago

@Mozgor *ngIf is recommended over [hidden]. Read here: angularjs.blogspot.de/2016/04/…

|

Collectives™ on Stack Overflow

How to concatenate variable with hard coded value inside click event in Angular4

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related