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

Prasad Kharkar

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.

13 thoughts on “Using Angular Material

  • Pingback:Using Angular Http Service - theJavaGeek

  • 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?

  • Pingback:Using primeng with angular 4 - theJavaGeek

  • August 22, 2017 at 1:10 am

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

  • 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

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

  • 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 *