So, if I do this in my HTML component:
<fa-icon [icon]="faSort" (click)="sort($event)"></fa-icon>
How will I get it's name in my ts component?
sort(event: Event) {???}
I tried doing it like this:
sort(event: Event) {
console.log(event['target']['ownerSVGElement']['classList'][1])
}
But the method above is very inconsistent. Is there a better way of doing this?
Font Awesome Package Link: https://www.npmjs.com/package/@fortawesome/angular-fontawesome
Assuming you don't really care about anything else that the event value may contain within it.
sort(event : any) {
console.log("Icon Name: ", event.iconName);
}
<fa-icon [icon]="faSort" (click)="sort({ iconName: 'faSort'})"></fa-icon>
Assuming you still want to capture the actual event itself:
<fa-icon [icon]="faSort" (click)="sort({event: $event, iconName: 'faIcon'})"></fa-icon>
The reason this works is that we allow our sort to accept a type of any, and we are creating a brand new object using the curly braces.