How to add classname to only one HTML element onclick in angular 2

Question

My JSON data looks like this.

let manageDiscRecords: discRecords[] = [
    {
    "ID"                  : 3,
    "discRec"             : "Some sample record",
    "Tasks"               : [{
                            "ID"          : 7,
                            "discParcel"  : ["string1", "string2"]
                            }]
    }, 
    {
    "ID"                  : 4,
    "discRec"             : "Some sample record 2",
    "Tasks"               : [{
                            "ID"          : 8,
                            "discParcel"  : ["string3", "string4"]
                            }]
    }
];

My HTML code is:

<li *ngFor="let parcel of discRecords; let i= index">
                    <a href="#" #elem id="availRecord_{{i}}" (click)="getDisplay(elem.id)">
                        {{ parcel.discRec}} 
                    </a>
                        <ul style="list-style: none; display: none;" id="subRecordHolder_{{i}}">

                            <li *ngFor="let task of parcel.Tasks; let i= index" [className]="itemAdded">
                                <ul style="list-style: none; padding-left:0">

                                   <li *ngFor="let discParcel of task.discParcel;  let i= index">  
                                       <a href="#" #elem id="availSubRecords_{{parcel.ID}}_{{task.ID}}_{{i}}" (click)="getStyle(elem.id, discParcel)">
                                           {{ discParcel}}
                                        </a>
                                    </li>

                                </ul>
                            </li>
                        </ul>
                    </li>

My output looks like this.

Some sample record
 - string 1 
 - string 2

some sample record 2
 - string 4
 - string 3

Now, i want to apply a class name "clickedNow" with "string 1" element when i click. Can you please let me how to achieve this.

<li> String 1</li> <li> String 2</li> <li> String 3</li> <li> String 4</li>. I want to append a class with <li>String 1</li> when i click on that. — Green Computers
– Green Computers, Commented Mar 20, 2017 at 11:54

YounesM · Accepted Answer · 2017-03-20 12:17:51Z

2

Something like this should do it :

In your template :

<li *ngFor="let discParcel of task.discParcel;  let i= index" [ngClass]="{'clickedNow' : discParcel === clickedElement}" (click)="elementActive(discParcel)">  
  <a href="#" #elem id="availSubRecords_{{parcel.ID}}_{{task.ID}}_{{i}}" (click)="getStyle(elem.id, discParcel)">
    {{ discParcel}}
  </a>
</li>

In your component :

let clickedElement : string = '';

elementActive(elem){
 this.clickedElement = elem; 
}

edited Mar 20, 2017 at 12:17

answered Mar 20, 2017 at 12:04

YounesM

2,31717 silver badges30 bronze badges

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

8 Comments

Pardeep Jain Over a year ago

the syntax of ngClaass wrong here buddy, also this method will apply class on every element which is clicked

YounesM Over a year ago

Yep, corrected, the ngClass. But why would it apply it to all the elements ? discParcel === clickedElement is not the same for every element

Green Computers Over a year ago

It adds class in both elements <li>string 1</li> and <li> string 4</li> since both has same index as 0.

YounesM Over a year ago

I don't use ids to add the class it shouldn't do that

Green Computers Over a year ago

You are right. But this condition will fail if i have same value in multiple <li>'s. Correct? For example <li>string1</li><li>string1</li>

|

Pardeep Jain · Accepted Answer · 2017-03-20 12:08:26Z

0

Do it like this

<li [ngClass]="{'clickedNow' : clickedElement}" (click)="elementActive(elem)">
  {{discParcel}}
<li>

private clickedElement: boolean = false
elementActive(elem){
    if(elem == "string1")
        this.clickedElement = elem; 
}

answered Mar 20, 2017 at 12:08

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

3 Comments

Green Computers Over a year ago

"string1" is a dynamic value which comes from JSON. So we can not do manual checking. Can you please find other solution.

Pardeep Jain Over a year ago

you must have some key or flag by using this you can check the condition, i know string1 will be dynamic value, so just pass the elem and check the flag and apply the class, simple i think

YounesM Over a year ago

@PardeepJain Why ? In let discParcel of task.discParcel discParcel contains the string that he displays. discParcel === clickedElement will be different for every <li>

Collectives™ on Stack Overflow

How to add classname to only one HTML element onclick in angular 2

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related