web
mobile
Edit these docs Rate these docs

Angular Bootstrap Filter

Angular Gallery Filter - Bootstrap 4 & Material Design

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


        <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).jpg'},
        {tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).jpg'},
        {tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg'},
        {tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).jpg'},
        {tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).jpg'},
        {tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).jpg'},
        {tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).jpg'},
        {tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).jpg'},
        {tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).jpg'},
        {tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).jpg'},
        {tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).jpg'},
        {tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).jpg'},
        {tag: 'food', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).jpg'},
        {tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).jpg'},
        {tag: 'architecture', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).jpg'},
        {tag: 'nature', imgSrc: 'https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).jpg'}
        ];
        }
      

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!

Edit these docs Rate these docs

Filter - getting started : download & setup


Download

This plugin requires a purchase.

Buy Filter plugin - $9

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 Filter
import { MdbFilterModule } from 'mdb-filter'

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']"