8. Collaboration

Material Design Lite lets you add a Material Design look and feel to your websites. You can integrate NgRippleModule with material-design-lite.

How to integrate:

1. Install angular material design lite.

   npm install material-design-lite --save

2. Import the styling your_project_root/src/style.scss

   ...
   @import "node_modules/material-design-lite/src/material-design-lite.scss";
   ...

3. Get desired styling classes at https://getmdl.io/components/index.html exclude mdl-js-ripple-effect.

   <button class="mdl-button mdl-button--raised mdl-button--accent" ripple light>
     Button
   </button>

   <!-- Raised button -->
   <button class="mdl-button mdl-js-button mdl-button--raised" ripple>
     Button
   </button>

   <!-- Colored raised button -->
   <button class="mdl-button mdl-button--raised mdl-button--colored" ripple light>
     Button
   </button>
   <!-- Accent-colored raised button -->
   <button class="mdl-button mdl-button--raised mdl-button--accent" ripple light>
     Button
   </button>
   <!-- Flat button -->
   <button class="mdl-button mdl-js-button" ripple>
     Button
   </button>
   <!-- Primary-colored flat button -->
   <button class="mdl-button mdl-js-button mdl-button--primary" ripple>
     Button
   </button>

Note: To make a custom component, you can refer to this style MDL Custom Style and this component Custom MDL Component