Utilisation de la conception de matériau angulaire dans Angular 4 app (+ Angulaire CLI)

Question

Comment utiliser bootstrap-material-design dans Angular 4 app (avec Angular CLI)?

Je viens d'ajouter le fichier css dans mon styles.css comme ceci:

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

Je peux accéder à bootstrap matière de conception des classes, mais certains éléments comme les entrées ne fonctionnent pas comme il serait.

Je pense que je dois ajouter dans le fichier .angular-cli.json les scripts jQuery et bootstrap-material-design mais cela n'a pas fonctionné.

Quelle est la bonne façon? De Docs, j'ai besoin d'initialiser le javascript matériel en ajoutant le javascript suivant à votre site, mais je ne peux pas.

$.material.init() 

Answer 1

Merci à Nano pour sa réponse qui m'aide.

Alors, j'ai ajouté mes styles et des scripts comme ceci en cli.json angulaire:

"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" 
    ] 

Ensuite, nous devons bootstrap matière de conception d'initialisation. C'est important de le faire après l'initialisation du contexte. Donc, dans un ngOnInit() était parfait pour moi. Je l'ai fait dans mes app.component.ts comme ceci:

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

Et il fonctionne comme je veux. Les entrées sont normales.

Answer 2

One vous avez installé la bibliothèque en exécutant

npm install --save bootstrap-material-design 

vous devriez être en mesure de relier tous les fichiers css et js à votre projet.

Pour ce faire, vous devez lier ces fichiers dans votre fichier angular-cli.json.

Les tableaux pour remplir le json sont respectivement styles pour le CSS et scripts pour le js.

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

    ... 

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

Espérons que cela fonctionne pour vous!

EDIT:

Si vous désirez utiliser du matériel Design vous pouvez plus facilement essayer celui-ci:

https://github.com/angular/material2

Il est aussi un fonctionnaire, bien intégré au cadre .