web-dev-qa-db-fra.com

MdBootstrap avec Angular

Comment concevoir des matériaux bootstrap avec Angular.

Voici ce que j’ai essayé jusqu’à présent… ..J’utilise Cli pour construire mon projet angulaire.

fichier angular-cli.json

J'ai installé MDB avec npm et les ai ajoutés à mon fichier clular json.

"styles": [
        "styles.css",
        "../node_modules/mdbootstrap/css/bootstrap.css",
        "../node_modules/mdbootstrap/css/mdb.css"
      ],
      "scripts": [
        "../node_modules/mdbootstrap/js/jquery-3.1.1.js",
        "../node_modules/mdbootstrap/js/tether.js",
        "../node_modules/mdbootstrap/js/bootstrap.js",
        "../node_modules/mdbootstrap/js/mdb.js"
      ],

Maintenant, j'ajoute le code au composant.

<button type="button" class="btn btn-warning">Warning</button>

Le code ne génère aucune erreur mais le clic et le clic ne fonctionnent pas. S'il vous plaît aider 

angularmaterial-designbootstrap-4
8
INFOSYS

Pour utiliser mdbootstrap dans Angular, vous devez installer la version Angular version} via npm:

npm i angular-bootstrap-md -save

FontAwesome est également utilisé, assurez-vous de l'ajouter à vos styles:

"../node_modules/font-awesome/scss/font-awesome.scss"

Et enfin, dans votre app.module.ts, vous devez inclure:

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { NO_ERRORS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
   ...,
    MDBBootstrapModule.forRoot()
  ],
  schemas: [NO_ERRORS_SCHEMA]
})

Voir plus sur leur page github:

https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design

8
Z. Bagley

En supposant que vous ayez installé le paquet npm et que vous l’ayez configuré correctement (voir ici ), il vous suffit d’ajouter la directive mdbRippleRadius dans la balise button, comme ceci:

<button type="button" class="btn btn-warning" mdbRippleRadius>Warning</button>

J'espère que ça aide!

1
menestrello