Rate these docs

Angular Bootstrap Filter

Angular Gallery Filter - Bootstrap 4 & Material Design

MD Angular Bootstrap Gallery Filter plugin is an extension perfect for introducing vistors to a number of images, which can be freely filtered depending on the category. Easy to use, setup and customize.

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


Basic example


        <mdb-filter>
          <div class="filter-nav d-flex flex-center">
            <button class="btn btn-success active" [mdbFilter]="''">All</button>
            <button class="btn btn-primary" [mdbFilter]="'nature'">Nature</button>
            <button class="btn btn-primary" [mdbFilter]="'food'">Food</button>
            <button class="btn btn-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'}
          ];
        }
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

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