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

11 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.
    https://github.com/angular/material2/issues/5320

    To resolve this run npm install –save @angular/cdk as the first step in the install tutorial
    http://www.thejavageek.com/2017/04/14/installing-angular-material/

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

    Once the @angular/cdk has been installed
    then
    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 🙂

    References:
    https://github.com/angular/material2/issues/5509
    https://material.angular.io/guide/theming

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

Leave a Reply

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