Angular Bootstrap Waves effect

Angular waves effect - Bootstrap 4 & Material Design

Waves effect is applied on the element by using on it mdbWavesEffect directive.

Example

Click me
Sample image with waves effect. 


        <!--Button with wave-->
        <a mdbBtn color="primary" size="lg" mdbWavesEffect>Click me</a>

        <!--Mask with wave-->
        <div class="view overlay">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).jpg" class="img-fluid" alt="Sample image with waves effect.">
          <a href="#">
            <div class="mask waves-effect waves-light rgba-white-slight" mdbWavesEffect></div>
          </a>
        </div>

Customization

There are available two types of different waves: .waves-effect and .waves-light.



        <!--For a regular waves-->
        <a mdbBtn color="primary" size="lg" mdbWavesEffect>Regular waves</a>

        <!--For a lighter version of waves-->
        <a mdbBtn color="primary" size="lg" class="waves-light" mdbWavesEffect>Light waves</a>

Angular Waves Effect - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular Waves Effect directive.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

// MDB Angular Pro
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule, ButtonsModule } from 'angular-bootstrap-md'
Import example Modules list