Using Angular Material

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

We saw installation in last article. Let us start using angular material to create awesome UI. We will continue with our bikes app and modify it.

Using Angular Material:

We are not going to look into too much details right now. Our objective is to simply display a list of bikes using angular material instead of plain html. You can checkout from github. Branch name is angular-material

Go to index.html of your app and include a theme as below.


By doing this, we are asking whole app to use indigo-pink theme. It comes bundled with libraries.


Notice two lines.

  • import { MaterialModule, MdList, MdListItem } from ‘@angular/material’  : This means we are going to use MdList,  MdListItem and MaterialModule in our app.
  • MaterialModule.forRoot() : required to be included in imports section of module.


Notice that we are using angular material md-list and md-list-item tags to iterate through bikes and display them. <li> is simply html while <md-list> is using angular material.

We are done, fire up the server and visit localhost:4200/bikes. You should be able to see a list generated using plain html and list using angular material.


Share Button

13 comments for “Using Angular Material

  1. Natalie
    July 24, 2017 at 6:12 pm

    I’ve gotten this far with few issues. However after implementing the code in this section and when I npm start, I get:

    ERROR in app/app.module.ts (26,20): Property ‘forRoot’ does not exist on type ‘typeof MaterialModule’

    After deleting .forRoot() on line: MaterialModule.forRoot(), it worked. Is this an adequate solution?

  2. Collin Smith
    August 22, 2017 at 1:02 am

    @angular/material now depends on @angular/cdk as a peer dependency.

    To resolve this run npm install –save @angular/cdk as the first step in the install tutorial

  3. Collin Smith
    August 22, 2017 at 1:10 am

    Once the @angular/cdk has been installed
    app.module.ts should remove the .fortRoot() to run properly

  4. Collin Smith
    August 29, 2017 at 10:14 pm

    I received errors where I could not load the indigo-pink.css style sheet as you have it in the index.html

    This can resolved by importing the style sheet in the styles.css file

    @import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;

    Seems like the code base is changing all the time, and tutorials can get out of date relatively quickly with Angular 4 🙂


    • August 30, 2017 at 5:58 pm

      Hi Smith thank you for your comments. Indeed, its hard to keep things up to date with latest changes 🙂 I would say simply cloning the repository and checking out respective branches from gitHub will make things easier

  5. Kassandra
    October 17, 2017 at 11:11 am

    Material isn’t working for me. I get bunch of errors.

    ERROR in D:/Angular/src/app/app.module.ts (12,10): Module ‘”D:/Angular/node_modules/@angular/material/material”‘ has no exported member ‘MaterialModule’.

    • October 17, 2017 at 12:16 pm

      Hi Kassandra,

      Angular has been making a lot of changes and I have got comments from many people about this issue. I will check what has been changed and update accordingly.

  6. Anatoly
    April 6, 2018 at 8:38 pm


    The Material code had changed slightly from what it is in your code. Here what I have found to make it work:
    * in app.module.ts do this:
    import { MatCardModule, MatInputModule, MatListModule } from “@angular/material”;
    imports: [

    * in bikes.component.html is this:
    instead of and use and

    • April 8, 2018 at 1:55 pm

      Thank you for pointing it out. Angular and other UI frameworks are evolving so fast to keep all articles updated is becoming more of a pain than pleasure 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *