DEV Community

Wrapping Angular Material button in custom Angular component (part 2)

Dzhavat Ushev on October 26, 2021

In the first part of this post we ended up with a simple but repetitive solution to wrapping Angular Material button in a custom component. In this...

Read full post

Benoît Plâtre • Jan 9 '22

Hi Dzhavat,
Thanks a lot for this blog post and the idea behind it.
I think it's a good approach, but I wondere how you would manage some important properties for buttons, like disabled and type ('submit').
When we use ngComponentOutlet we can't use input. Maybe we would have to create other types of components, for submit it could be fine, but for disabled, which is supposed to be dynamic, it might be harder.

Dzhavat Ushev Playful Programming Angular • Jan 10 '22

Hi Benoît,
Thanks for you comment.

I wondere how you would manage some important properties for buttons, like disabled and type ('submit').

We're using this approach on a button component at work. We recently had a use case where we had to change the type of one button to submit and another one to button. What we did was we introduced a new property. We changed the type property to accept a type (i.e. submit or button, button being the default) and we added a variant which could be primary, secondary or text.

As for the disabled attribute, the ngComponentOutlet has an injector input which can be used to inject values. How we use it is to provide a custom token, which is also injected in the internal components as well. This way it's possible to pass dynamic values. If you're interested in knowing more, I can point you to some examples. Hope some of this helps you :)

Benoît Plâtre • Jan 10 '22

Hi Dzhavat,
Thanks a lot for your reply. Yes I learnt than we can use an injector in the ngComponentOutlet params but I didn't succeed making it work yet. If you have an example, it would be helpful :-)

Dzhavat Ushev Playful Programming Angular • Jan 11 '22

Sure :)

In this code you can see how we create the injector which is later passed to ngComponentOutlet in the template. We provide disabledAttributeToken which is injected in all internal buttons to control the disabled state. The same way we inject the type attribute.

Benoît Plâtre • Jan 12 '22

Hi Dzhavat,
Thanks a lot for this example ! It will help a lot, hopefully not only me :-)
Have a nice day !

Benoît Plâtre • Jan 24 '22 • Edited

Hi Dzhavat,
I could successfully implement my version on your button ;-)
I faced a problem regarding the disabled property. It works well on instanciated buttons, but, when listening to click event on the wrapper, you still get the event, even if the button is disabled.
I tried to preventDefault/stopPropagation the click event from the Host but it didn't work.
Finally I did this :

constructor(
    private injector: Injector,
    private el: ElementRef<HTMLElement>
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    const { nativeElement } = this.el;
    if (this.disabled) {
      nativeElement.style.pointerEvents = 'none';
    } else {
      nativeElement.style.pointerEvents = 'auto';
    }
  }

I don't know if you faced that problem yet :-)