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()

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