Add Angular Material to an Angular 8 application
Let’s assume you have an Angular application and you want to add the Angular Material library to it. What steps are necessary to take?
Create the application
I assume you already have an application, but for this tutorial, I started with a new application.
ng new sample-appI included Angular routing and SCSS styles.
Both a git repository and an npm package were automatically created.
By the way, I’ve put together a small collection of tools I use regularly — things like time tracking, Git helpers, database utilities, and a few others that make development a bit smoother.
Add Angular Material
The quick route is using Angular CLI’s install schematic:
ng add @angular/materialIf you don’t use the CLI or want to know the details, follow the following steps.
Start with adding the required npm packages:
npm install @angular/material @angular/cdkAngular CDK (Component Dev Kit) is a library that provides behaviors to components without providing means to render (display) them. Angular Material is the library that uses CDK and displays the components using Google Material style.
Next, include the Angular Material’s styles in your application. Edit angular.json and add your chosen Material stylesheet. I chose: deeppurple-amber.css, and the full path to it is: ./node_modules/@angular/material/prebuilt-themes/deeppurle-amber.css.
Find all "styles" elements and add that CSS before your styles. I had two "styles", one in "build" and one in "test" node.
There are two other options to add the styles:
- as a link to HTML:
<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet"> - as an import to SCSS:
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
Finally, edit src/app/app.module.ts and add BrowserAnimationsModule to enable Angular Material’s animations:
Optionally add a font and icon set:
Check if the application works with ng serve.
Add a button
Let’s add a Material button. Using the docs, the simplest code would be:
Unfortunately, the button looks like a plain button. It is not styled. What did go wrong?
In the same documentation, in the API tab, there is an import listed: import {MatButtonModule} from '@angular/material/button'. Indeed, you need to make sure that the module is available to the component that is going to use a Material button. You will have to do the same with the other components you add as well.
Because my app.component.html is declared in app.module.ts, I edit the latter to add the MatButtonModule:
Now I saw the following error:
ERROR in node_modules/@angular/material/button/button-module.d.ts:8:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/material/button) which declares MatButtonModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.It seems to be a bug in the new rendering engine, Ivy. Just stop the application and run it again (ng serve).
Add an input field
Similarly to a button, let’s add an input field. First, let’s modify the HTML file only:
Now there is a compiler error (visible after restarting the application):
ERROR in src/app/app.component.html:3:1 - error NG8001: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3 <mat-form-field>
~~~~~~~~~~~~~~~~This is an evident error that we forgot some import. The answer is again the documentation – include MatInputModule:
Now the input field is styled.
Thanks a lot for the infromtion