• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

157
Views
How to get a font awesome icon name when using click event on it?

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error