Angular Material Components

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 as follows: