Feature request: Programming API for icons

Describe the problem you’d like to see solved or task you’d like to see made easier

I want to change an icon to indicate progress during an async function. Currently I’d need to keep an extra variable that the Angular template can check against and make different icons visible. I’d much rather talk to the icon directly.

Is this in relation to an existing part of angular-fontawesome or something new?

I couldn’t find a way to change the icon using typescript, so I think this is new. If this is already possible then please point me in the general direction where this is documented.

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

Use Angular’s best practises for the API.

Why would other angular-fontawesome users care about this?

They will be able to modify and change icons with code in their components.

Example 1:

<fa-icon #myIcon [icon]="someIcon" (click)="doASpin(myIcon)"></fa-icon>

public doASpin(myIcon: FaIconComponent) {
    myIcon.spin = true;
    // Icon is now spinning, wheeeeee!

    setTimeout(() => myIcon.spin = false, 9001);
    // Let's not get too crazy.
}

Example 2:

<fa-icon #myIcon [icon]="someIcon" (click)="changeIcon(myIcon)"></fa-icon>

public changeIcon(myIcon: FaIconComponent) {
    myIcon.icon = icon(someOtherIcon as IconDefinition);
}

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

9 - “Tomorrow’s fine too”

Feature request checklist

• This is a single feature-ish (i.e. not a re-write of all of Font Awesome)
• The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[Ionaru]

With myIcon.ngOnChanges({}); it works like a charm, thank you for the help!

I hope the functionality gets expanded by both the Angular and FontAwesome teams in the future. 👍

[toverux]

Hi! I need this too, same use case 😃

I’ve discovered that calling ngOnChanges works because I’m quite used to change inputs programmatically, especially since Angular directives can’t bind to inputs of the host element through @HostBinding (only DOM attributes).

I’m not sure that Angular will offer an API to do that properly anytime soon as the problem is complex, and actually, using ngOnChanges directly is dangerous (in fact, there’s even a TSLint check for that). It works here because, very fortunately, you don’t use the changes: SimpleChanges argument that is passed to ngOnChanges(). The day it changes (because you want to optimize the re-rendering for example), my app breaks without a compile-time error. I’m already seeing it happen 😄

It would be really cool if we could have a public render(): void method on FaIconComponent, that we can call to trigger the same rendering code as ngOnChanges() now. Then, ngOnChanges() can just call this render() method. A three-lines diff.

If one day, in the middle of a refactor, this method had to be removed, it can be done with a breaking change version, so we’re aware of the change (and most importantly, the project won’t compile so we can’t miss it).