Autoplay

    Install and Configure a Project with Angular Material

    Brian TronconeBrian Troncone

    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.

    angularAngular
    5 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss