MdBootstrap with Angular

Question

How to make bootstrap material design with Angular.

Here is what i have tried so far . I am using cli to build my angular project.

angular-cli.json file

I have installed MDB using npm and added these 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 add the code to the component.

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

The code throws no error but the click wave and click are not functioning. Please help

Answer 1

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

npm i angular-bootstrap-md -save

FontAwesome is used as well, 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]
})

See more on their github page:

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

Answer 2

Assuming you installed the npm package, and configured it correctly (see here), you just need to add the mdbRippleRadius directive in button tag, like this:

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

Hope it helps!