jquery - Usando angular-material-design em aplicativo Angular 4 (+ Angular CLI)

Como usar bootstrap-material-design em um aplicativo Angular 4 (com Angular CLI)?

Acabei de adicionar um arquivo css no meu styles.css assim:

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

Posso acessar as classes do bootstrap-material-design, mas alguns elementos, como os campos de entrada, não funcionam como deveriam.

Eu acho que tenho que adicionar no arquivo .angular-cli.json os scripts jQuery e bootstrap-material-design, mas isso também não funcionou.

Qual é a maneira correta?

Nos Docs, eu preciso inicializar o material javascript adicionando o seguinte javascript ao seu site, mas eu não consigo.

$.material.init()

Resposta #1

Uma vez que você tenha instalado a biblioteca executando

npm install --save bootstrap-material-design

você deve ser capaz de vincular todos os arquivos css e js ao seu projeto.

Para fazer isso, você deve vincular tais arquivos no seu arquivo angular-cli.json.

Os arrays para preencher no json são respectivamente styles para o css e scripts para o js.

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

  ...

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

Espero que isso funcione para você!

EDITAR :

Se você quiser usar o Material Design mais facilmente, pode experimentar este:

https://github.com/angular/material2

Também é o oficial, bem integrado com o framework.

Resposta #2

Obrigado ao Nano pela sua resposta que me ajuda.

Então, eu adicionei meus estilos e scripts assim no 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"
    ]

Então, precisamos iniciar o bootstrap-material-design. É importante fazer isso após a inicialização do contexto. Então, em um ngOnInit() foi perfeito para mim. Eu fiz isso no meu app.component.ts assim:

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

E funciona como eu quero. As entradas são normais.