Angular 2 call a function based on class applied on a div

Question

I have a div with *ngFor to loop though an array of messages.

<div *ngFor="let message of messages;  let i=index" 
 [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i  }" 
(click)="onAddtoMessage(message.id); activeIndex = i"></div>

I am applying class "message-list-active" on focused item, and this message changes color to blue.

I have a click event when I click I am able to pass the message id.

The question is how can I pass the ids by not clicking, but pass ids of the messages that have 'message-list-active' applied. As in future random messages can be selected by default, and I need their ids.

Answer 1

Use a function in [ngClass]

<div *ngFor="let message of messages;  let i=index" 
 [focused]="i === activeIndex;" [ngClass]="{
        'message-list-active': activeClass(i, message)
 }" 
(click)="onAddtoMessage(message.id); activeIndex = i"></div>


activeClass(index, message){
   if(index === this.activeIndex){console.log(message.id)}
   return index === this.activeIndex;
}