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.

Answer 1

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; 
}