Install and Configure a Project with Angular Material
This lesson demonstrates the basic project setup required to get started with Angular Material. Required and suggested packages are discussed as well as custom material module and theme setup.
Instructor: [00:01] To get started with Angular Material, we need to install a few packages. The first is Angular CDK. This is a toolkit for more general functionality, such as platform recognition, key codes, and overlays.
[00:11] Next is the Angular Material module. This includes all the Material-Design-themed Angular components you can use within your application. Last is Hammer.js, which provides gesture support for some Material components such as a slider. While this package isn't required, it is suggested.
[00:26] Once installation is complete, we need to create an Angular module that exports the Material components we're going to use within our application. We'll start with the Material toolbar module. We can go ahead and add it to our module exports. The components will be available within our app.
[00:41] We'll then import our Material module into our main app module. These components will be available within our templates. We'll also include the BrowserAnimationsModule for smooth animations and transitions. For gesture support, we need to include Hammer.js in our app entry point.
[00:55] Last, we need to add an import for a Material theme. For now, we'll choose one of the prebuilt themes that come packaged with the Angular Material module. We can now swap out this div for the Material toolbar. We'll give it a color of primary for now.
[01:09] To make sure everything is working, we'll go ahead and run the app. We can see we have our Material toolbar component displaying on the screen.