Using angular-material-design in Angular 4 app (+ Angular CLI)

Question

How to use bootstrap-material-design in Angular 4 app (with Angular CLI)?

I just added css file in my styles.css like this:

@import "~bootstrap-material-design/dist/css/bootstrap-material-design.min.css";

I can access bootstrap-material-design classes but some elements like inputs don't work like it should.

I think I have to add in .angular-cli.json file the jQuery and bootstrap-material-design scripts but that didn't work either.

What is the correct way?

From Docs, I need to initialize the material javascript by adding the following javascript to your site, but I can't.

$.material.init()

Nano · Accepted Answer · 2017-06-16 09:26:13Z

1

One you have installed the library by running

npm install --save bootstrap-material-design

you should be able to link all the css and js files to your project.

To do that you should link such files in your angular-cli.json file.

The arrays to fill in the json are respectively styles for the css and scripts for the js.

  "styles": [
    ...
    "../node_modules/bootstrap-material-design/sass/bootstrap-material-design.scss"
    ...
  ]

  ...

  "scripts": [
    "../node_modules/bootstrap-material-design/scripts/index.js"
  ]

Hope this works for you!

EDIT:

If you wish to use Material Design more easily you can try this one:

https://github.com/angular/material2

It is also the official one, well integrated with the framework.

edited Jun 16, 2017 at 9:26

answered Jun 15, 2017 at 9:47

Nano

8642 gold badges14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stalyon Over a year ago

Hi Nano! thank you for your answer. Where did you put this call: $.material.init()? And why import /scripts/index.js and not /dist/js/material.js?

Nano Over a year ago

You can call it from the index.html page in a script tag!

Nano Over a year ago

You import /scripts/index.js because it is the development version and not the compiled one.

Stalyon · Accepted Answer · 2017-06-19 15:36:20Z

1

Thank you to Nano for his answer which helps me.

So, I added my styles and scripts like this in angular-cli.json:

    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.min.css",
        "styles.css"
    ],
    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/bootstrap-material-design/dist/js/material.min.js"
    ]

Then, we have to init bootstrap-material-design. That's important to do it after the context initialisation. So, in a ngOnInit() was perfect for me. I did that in my app.component.ts like this:

import { Component, OnInit } from '@angular/core';

declare let jQuery: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
    ngOnInit() {
        // Init bootstrap-material-design
        jQuery.material.init();
    }
}

And it works like I want. Inputs are normal.

answered Jun 19, 2017 at 15:36

Stalyon

5788 silver badges23 bronze badges

1 Comment

Shatayu Darbhe Over a year ago

For bootstrap 4 they have asked to add $('body').bootstrapMaterialDesign();

Collectives™ on Stack Overflow

Using angular-material-design in Angular 4 app (+ Angular CLI)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related