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.

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. https://github.com/theJavaGeek/angular. Branch name is angular-material

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

index.html:

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

app.module.ts:

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.

bikes.component.html:

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

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

Leave a Reply

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