Add Angular Material to an Angular 8 application

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-app

I included Angular routing and SCSS styles.

Both a git repository and an npm package were automatically created.

Add Angular Material

The quick route is using Angular CLI’s install schematic:

ng add @angular/material

If 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/cdk

Angular 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.

JSON
angular.json

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:

TypeScript
src/app/app.module.ts

Optionally add a font and icon set:

HTML
src/index.html
CSS
src/styles.scss

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:

HTML
src/app/app.component.html

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:

TypeScript
src/app/app.module.ts

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:

HTML
src/app/app.component.html

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:

TypeScript
src/app/app.module.ts

Now the input field is styled.

Leave a Reply

avatar
  Subscribe  
Notify of