liveBook · Manning

Mat-button directive

As explained in Pro Angular 16

The Angular Material button directive is a directive that applies Angular Material button styling and behavior to button or anchor elements.

The Angular Material button directive applies themed button styling and behavior to regular HTML button or anchor elements. The directive preserves normal browser interaction, so button clicks use Angular event bindings such as (click). section 28.2.1

Themed actions in a product table

Use mat-flat-button with color="accent" or color="warn" to distinguish actions such as deletion. Bind (click) to the action method and [disabled] to application state, for example [disabled]="isServer".

Apply mat-button to administration navigation buttons alongside routerLink and routerLinkActive. Import MatButtonModule, preferably through a shared MaterialFeatures module that imports and exports the required feature modules. section 7.5.2

Angular Material does not provide general margin and padding utilities. Add targeted CSS when needed, and avoid mixing unrelated package styles because their interactions can be unpredictable. section 28.2.1

How Pro Angular 16 covers it

How deep it goes
Defines button variants, theme colors, module imports, event bindings, and styling limitations without descending into directive internals.
Examples
Demonstrates administration menus and product-table Delete actions using themed, routed, clickable, and conditionally disabled buttons.
What it assumes
Uses Angular templates, HTML button elements, Angular bindings, and Angular module imports while treating the underlying HTML button behavior as familiar.
What you can do after
Apply it via Angular Material by selecting a button attribute, importing MatButtonModule, and binding actions or state.
How it connects
Connects button directives with Angular event binding, routing, Angular Material themes, feature modules, and CSS selectors.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.