javascript - Angular 11 - Add icons with different styles to a custom button component

Question

In my Angular 11 App I've implemented a custom button component. For styling I use TailwindCSS and TailwindUI.

The button can have multiple colors(red, blue, gray, etc) and also different sizes (xs, sm, md, lg, xl).

I want to create a variant for these buttons: a button with a leading icon, as shown here: https://tailwindui.com/components/application-ui/elements/buttons#component-8a4b7248253ad4c9ee892c655d7ff5ec.

For the icons, I use the following library: https://ng-heroicons.dimaslz.dev/

An icon is a component, like: <mail-solid-icon></mail-solid-icon>, <bookmark-solid-icon></bookmark-solid-icon> etc.

Because of the different sizes (xs, sm, md, lg, xl) of the button, I need to add custom Tailwind classes to the icon. For example:

<app-button [size]="'xs'">
  <mail-solid-iconclass="-ml-0.5 mr-2" [size]="16"></mail-solid-icon>
  Button text
</app-button>

<app-button [size]="'xl'">
  <bookmark-solid-icon class="-ml-1 mr-3 h-5 w-5" [size]="20"></bookmark-solid-icon>
Button text

Desired result:

I want to be able to provide only the icon component and then, in button's component class, to add the classes -ml-0.5 mr-2, or -ml-1 mr-3 h-5 w-5; as well as the size property.

Example of use in a template:

 <app-button [size]="'xl'">
  <bookmark-solid-icon></bookmark-solid-icon>
   Button text
 </app-button>

Output:

<app-button [size]="'xl'">
  <bookmark-solid-icon class="-ml-1 mr-3 h-5 w-5" [size]="20"></bookmark-solid-icon>
   Button text
 </app-button>

I've tried to use a custom directive and get it using @ContentChild, but I can't add the classes to it.

Thanks!

Stackblitz example: https://stackblitz.com/edit/angular-ivy-6gpcby?file=src%2Fapp%2Fbutton%2Fbutton.component.ts

Answer 1

This is the sample code that may help you to achieve what you want to do: https://stackblitz.com/edit/angular-ivy-xymefd?file=src%2Fapp%2Fbutton%2Fbutton.component.ts

What I changed from your code are:

1. Add ButtonIconDirective to AppModule declarations.
2. Use appButtonIcon instead of docsButtonIcon.
3. Inject ElementRef into ButtonIconDirective. (We will use ElementRef in ButtonComponent).
4. Append a template variable onto <bookmark-solid-icon> to get its component instance.
5. Rewrite ngAfterContentInit in ButtonComponent method to update size and add new CSS classes at runtime:

public ngAfterContentInit(): void {
  console.log( 'this.icon: ', !!this.icon);
  
  if (this.icon) {

    // reference to ng-heroicons component source code
    this.icon.style = '';
    this.icon.size = 50;     
    this.icon.renderStyle(); 

    this.renderer.addClass(this.iconi.er.nativeElement, '-ml-1');
    this.renderer.addClass(this.iconi.er.nativeElement, 'mr-3');
    this.renderer.addClass(this.iconi.er.nativeElement, 'h-5');
    this.renderer.addClass(this.iconi.er.nativeElement, 'w-5');      

    console.log(this.icon.style);
  }
}