MdBootstrap with Angular

user_7805613 0
Viewed 14074

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

bootstrap-4 material-design angular
3 Answers

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!

user_58169110

Just execute this command, it will automatically add the required paths in the configuration file.

ng add angular-bootstrap-md
user_91439810
Related