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

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
    Permalink

    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?

    Reply
  • Pingback:Using primeng with angular 4 - theJavaGeek

  • August 22, 2017 at 1:10 am
    Permalink

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

    Reply
  • August 29, 2017 at 10:14 pm
    Permalink

    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

    Reply
    • August 30, 2017 at 5:58 pm
      Permalink

      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

      Reply
  • October 17, 2017 at 11:11 am
    Permalink

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

    Reply
    • October 17, 2017 at 12:16 pm
      Permalink

      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.

      Reply
  • April 6, 2018 at 8:38 pm
    Permalink

    Hi,

    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: [
    ….
    MatListModule,
    MatCardModule,
    MatInputModule,
    ….],

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

    Reply
    • April 8, 2018 at 1:55 pm
      Permalink

      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 🙂

      Reply

Leave a Reply

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