Feature request : Dynamic icon change

pbrissaud commented 4 years ago

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

Before upgrading to Angular 9, I used the angular-font-awesome package. After the upgrade, my app was broken so I move to this awesome package !

In my app, I create a custom collapse (which is a bootstrap card) with a custom directive. This directive shows/hides the body of the card and modifies the icon (chevron-up/chevron-down) on a click event.

Here's my directive :

@HostListener('document:click', ['$event.target'])
  public onClick(target) {
    if (this.el.nativeElement.contains(target)) {
      const header = this.el.nativeElement ;
      const card = header.parentNode ;
      const body = card.lastChild ;
      const icon = header.firstElementChild.firstElementChild.lastElementChild.firstElementChild ;
      // console.log(icon);
      if (body.classList.contains('show')) {
        body.classList.remove('show');
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
      } else {
        body.classList.add('show');
        icon.classList.add('fa-chevron-up');
        icon.classList.remove('fa-chevron-down');
      }
    }
  }

It's a little barbaric method but it worked fine before the update :smile: !

When I see the generated code of the icon, I understand what was wrong :

Before update (angular-font-awesome package) <fa _ngcontent-sjh-c7="" name="chevron-down" _nghost-sjh-c3=""><i _ngcontent-sjh-c3="" aria-hidden="true" class="fa fa-chevron-up"></i></fa>

After update (angular-fontawesome package) <fa-icon _ngcontent-hll-c84="" icon="chevron-down" class="ng-fa-icon"><svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></fa-icon>

And unfortunately, when the class of the svg element changes, the icon doesn't change (which is perfectly understandable because of the svg).

I searched in your documentation and I didn't see a way to dynamically change the icon. So I though, it was a good feature to add in this package !

Regards,

Paul Brissaud

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

New

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

More practical than using *ngIf to show or hide the icon

Why would other angular-fontawesome users care about this?

Chevron-up and chevron-down are often use in collapse or menu, they are made to be switched.

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

7

Feature request checklist

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

devoto13 commented 4 years ago

Please check https://github.com/FortAwesome/angular-fontawesome/issues/159#issuecomment-519527147 for an example of how to change the icon dynamically.

pbrissaud commented 4 years ago

Thanks, I didn't see that. I'll try to adapt my code then.

Regards

Paul BRISSAUD

FortAwesome / angular-fontawesome