MdBootstrap with Angular

Question

How to create boot material design using Angular.

Here is what I have tried so far. I use cli to create my angular project.

angular-cli.json file

I installed MDB using npm and added them to my angular cli json file.

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

Now I am adding code to the component.

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

The code does not cause an error, but the click wave and click do not work. Please, help

Answer 1

To use mdbootstrap in Angular, you must install the Angular version via npm:

npm i angular-bootstrap-md -save

FontAwesome is also used, so be sure to add it to your styles:

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

And finally, in your app.module.ts you need to include:

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

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

github:

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

Answer 2

, npm (. ), mdbRippleRadius , :

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

, !