Angular Material Components
Explore how to add Angular Material components to your Angular app, including installation with Angular CLI and usage of UI elements like toolbars. Understand how to create a shared module for organizing Angular Material imports to simplify development and testing in your project.
We'll cover the following...
Angular Material
The Angular team at Google also maintains a set of user interface components for use within Angular named Angular Material. This set of components includes buttons, header bars, icons, dropdowns, menu items, date pickers, and dialogues, along with a host of useful and stylish components. Angular Material can be added to an Angular project using the Angular CLI as follows:
ng add @angular/material
This command will download and install the necessary packages via npm. It will also ask a number of questions about choosing a prebuilt theme, topography, and animations.
Feel free to choose any of the themes presented and then choose the Yes
option for the following two questions:
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
The installation of Angular Material will also update the existing Angular
application with modifications to the angular.json file, the index.html file, and the app.module.ts file.
Let’s move on and use the Material toolbar in our header component ...