Angular Bootstrap Waves Effect

Angular Waves Effect - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap waves effect is an impression of circular overlay movement, triggered by clicking the object, flowing from the center of the click. By default, waves are added and active on elements such as buttons and navbar's links, on some they wait for waves prop, as is the case with masks. Ultimately, it is failrly easy to add them onto any custom component -- see how you may attach it in the API section

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).webp"
              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. 

        
            
          import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { WavesModule, ButtonsModule } from 'angular-bootstrap-md';
Import example Modules list