Angular Bootstrap Filter

Angular Filter - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

The MDB Angular Bootstrap Gallery Filter plugin is an extension that is perfect for introducing visitors to a number of images, which can be freely filtered depending on the category. It's easy to use, setup and customize.

To start working with filter plugin see the "Getting Started" tab on this page.

Basic example

image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
` 
        
            
            <mdb-filter>
              <div class="filter-nav d-flex flex-center">
                <button mdbBtn color="success" class="active" [mdbFilter]="''">All</button>
                <button mdbBtn color="primary" [mdbFilter]="'nature'">Nature</button>
                <button mdbBtn color="primary" [mdbFilter]="'food'">Food</button>
                <button mdbBtn color="primary" [mdbFilter]="'architecture'">Architecture</button>
              </div>
              <mdb-filter-content>
                <div class="container">
                  <div class="row">
                    <div class="col-md-3 my-1" mdbFilter *ngFor="let item of galleryItems">
                      <mdb-filter-item class="item" [mdbFilterItem]="item.tag"
                                       [animationClass]="['animated', 'zoomIn', 'faster']">
                        <img [src]="item.imgSrc" alt="image">
                      </mdb-filter-item>
                    </div>
                  </div>
                </div>
              </mdb-filter-content>
            </mdb-filter>
          
        
    
        
            
            import {Component} from '@angular/core';

            @Component({
              selector: 'gallery-filter',
              templateUrl: './gallery-filter.component.html',
              styleUrls: ['./gallery-filter.component.scss']
            })
            export class GalleryFilterComponent {
              galleryItems = [
                { tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp' },
                { tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp' },
                { tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp' },
                { tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp' },
                { tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp' },
                { tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp' },
                { tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp' },
                { tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp' },
                { tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp' },
                { tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp' },
                { tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp' },
                { tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp' },
                { tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp' },
                { tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp' },
                { tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp' },
                { tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).webp' }
              ];
            }

Installation guide

Step 1: Create a new Angular application using the Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract the downloaded archive from Step 2 and copy the mdb-filter-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-filter-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-filter-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-filter-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbFilterModule into the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract the downloaded archive from Step 1 and copy the mdb-filter-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-filter-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-filter-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-filter-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbFilterModule into the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular Filter - API

Download

This plugin requires a purchase.

Buy Filter plugin

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 { MdbFilterModule } from 'mdb-filter';
Import example Modules list

Directives

MdbFilterDirective

Selector: mdbFilter

Type: MdbFilterDirective

MdbFilterItemDirective

Selector: mdbFilterItem

Type: MdbFilterItemDirective

Components

MdbFilterItemComponent

Selector: mdb-filter-item

Type: MdbFilterItemComponent

Inputs

MdbFilterDirective
Name Type Default Description Example
mdbFilterDirective string ' ' Used with directive attribute binding to set the tag for filtering. [mdbFilter]="'nature'"
MdbFilterItemDirective
Name Type Default Description Example
mdbFilterItem string - Used with directive attribute binding to set the data-filter-item attribute on the mdb-filter-item component. This input is necessary. [mdbFilterItem]="item.tag"
MdbFilterItemComponent
Name Type Default Description Example
animationClass string 'animated zoomIn faster' Used to set the MDB Animation on the filter items. Set to empty string if you want to turn off animations. [animationClass]="['animated', 'zoomIn', 'faster']"