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.
Hi there, just to point out in the repo there is only master branch and not a branch for lesson. Imho bad idea to put sidebar component in the first lesson (its not easy to follow as first component)
where you define tag mat-toolbar in the app.components.ts thanks
i got this error when follow your instruction:
ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: Failed to find '@angular/material/prebuilt-themes/pink-bluegray.css' in [ C:\Users\xuan tran\my-app\src ] at resolveModule.catch.catch (C:\Users\xuan tran\my-app\node_modules\postcss-import\lib\resolve-id.js:35:13) at <anonymous> i ｢wdm｣: Failed to compile.
this is the whole process: $ npm start
my-app@0.0.0 start C:\Users\xuan tran\my-app ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-03-19T08:59:04.226Z Hash: 799e3aaa780b5db482c0 Time: 12792ms chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered] chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.76 MB [initial] [rendered]
ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: Failed to find '@angular/material/prebuilt-themes/pink-bluegray.css' in [ C:\Users\xuan tran\my-app\src ] at resolveModule.catch.catch (C:\Users\xuan tran\my-app\node_modules\postcss-import\lib\resolve-id.js:35:13) at <anonymous> i ｢wdm｣: Failed to compile.
After installing material component inside vs code.I still get that error
where dp i get this css file: @angular/material/prebuilt-themes/pink-bluegray.css
maybe this will works: @import "~@angular/material/prebuilt-themes/indigo-pink.css";
0:59 it shows the css file as "pink-bluegray.css". This file didn't exist for me and I needed to change the spelling to 'grey' instead of 'gray'