Angular Material is a component library for Angular applications that follows Material Design. It supplies common interface features—such as buttons, tables, and layouts—as components and directives, so you can focus on application behavior instead of building every control. It is optional: a library can speed development and give the interface a consistent appearance, but its data requirements and customization limits may not suit every project. section 28.0 section 28.1
To add it to an existing Angular application:
- Run `ng add @angular/material@^16` and confirm the installation. The installer uses schematics to configure project files. section 28.1
- Import only the feature modules you need into an Angular module. Features are selected individually because each one adds JavaScript for the browser to download. A separate module can collect and export the selected features. section 2.4 section 7.4
- Apply the imported features as elements or attributes in a component template. Continue using Angular bindings and component methods for the behavior behind them. section 2.4.1 section 2.8
Listing 2.13. Applying components in the app.components.html file in the src/app folder
<mat-toolbar color="primary" class="mat-elevation-z3">
<span>{{ username }}'s To Do List</span>
<mat-icon matBadge="{{ itemCount }}" matBadgeColor="accent">
checklist
</mat-icon>
</mat-toolbar>
The toolbar is an element; the icon is another element with badge attributes. Theme color values style the toolbar and badge, while interpolation supplies the badge count. section 2.4.1
Adding a to-do item
Place an input with `matInput` inside `mat-form-field`, then add a `mat-raised-button`. An Angular click binding passes the input value to `addItem` and clears the field. Angular Material styles the controls; the component method adds the item. Custom CSS can still be needed to arrange the controls. section 2.8
A Material theme can also help custom components match library components. When combining Angular Material with Bootstrap CSS, check for style conflicts: one integration required changing the body class to remove an unwanted scrollbar. section 28.4 section 28.1.2
