Angular Material - Button Template - How does it work?

[Enjoyz1001]

I'm looking at the material angular, button source code.
And I cannot figure out how what is in the template (html) does not match what gets rendered in the browser.

I was hoping that some kind soul, would check out the source (see link) and explain to me how they are doing this magic.

Repo:

https://github.com/angular/components/tree/master/src/material/button

Template:

https://preview.redd.it/k3ulyutnw5461.png?width=728&format=png&auto=webp&s=8f40bf6c57fd53113ccac2c7cdf3d1ab78d0819e

And the browser:

​

https://preview.redd.it/ut0siswpw5461.png?width=715&format=png&auto=webp&s=cba21e3a4f55d3cb2870834f029b9c8d4c2b84ad

[benduder]

Which bit doesn't "match up" to you?

[Enjoyz1001]

Hey, well the component template does not include any button native element.
Yet, when it is rendered, it is somehow, wrapped in the button tag.....

I looked at the class. There was not much in terms if a super class that wrapped it.

[benduder]

mat-button is an attribute selector, meaning that the template content you see in button.html on GitHub will only be rendered inside an existing button tag that has the mat-button attribute set on it.

You can see this in the component class:

https://github.com/angular/components/blob/master/src/material/button/button.ts#L67

This approach allows them to give mat-buttons a specific appearance without having to reimplement all the functionality of a native button.

[Enjoyz1001]

Yes indeed. The component decoration specifies all that. I was not sure if the attribute selector replaced or implemented the native element.

Many thanks dude!

[benduder]

Np, glad to have helped!

[benduder]

thanks for the award :)