Style an angular material button other than via attribute?

Question

I have just started using Angular Material at work. But I immediately hit something that puzzles me - hopefully I have the wrong end of the stick. To style a button you seem to have to add an attribute, not a class.

<button mat-raised-button>Continue</button>

Is there a way to do it via a css class? If not then if you build a large complex site using at lot of mat-raised-button, and the client decides they want mat-stroked-button, you have to change every button instance? Regular css/HTML button surely has the advantage here, as you would be able to apply one css class to many button instances, then just change a single class definition to change styling everywhere. What am I missing - or is style really meshed with function (anti-pattern) in Angular Material?

Answer 1

From an HTML perspective, mat-raised-button may look like an element attribute with no value, but as part of Angular Material, it is actually part of a component selector - the other part being the element name button. So the combination <button mat-raised-button> creates an Angular Material MatButton component which is not the same as a plain button plus CSS. This is usually fairly obvious, as most Angular Material components do not have an HTML equivalent an therefore have their own element names (e.g. <mat-toolbar>), but there are a few exceptions to this such as <button>.

When you 'use' Angular Material components (as well as directives) like MatButton, you are not merely 'styling' existing HTML components (like with Bootstrap-CSS for example). You are using components that have many features beyond what could be done with CSS only, and of course you are building on the feature-rich Angular platform.

So yes - you would have to refactor all of your code from mat-raised-button to mat-stroked-button should that requirement change. However, most code editors/IDEs nowadays make that a fairly straightforward task. Also, applications often 'wrap' common application patterns into their own components. So you can have a my-app-button component that you use throughout your application which includes a MatButton, and then you would only have to change that single definition (or however many different button patterns your application might use).

If you are only interested in Material Design styling for standard HTML5 interfaces, other CSS-only solutions probably exist which might be a more appropriate choice (depending on application requirements).