Stack Blur for Angular v2/v4 and Ionic v2/v3 is the component that adds blur effect on images in your app (demo). In background it uses stackblur-canvas, so don't forget to install it as (npm) dependency in your app.

Installation:

• Download the zip file and unzip it;
• Copy files from mama-stack-blur/src and paste them into src folder within your project;
• Import component in app.module.ts:

```javascript import { MamaStackBlur } from 'path/to/mama-stack-blur'; ...

@NgModule({ declarations: [ ..., MamaStackBlur ], ... }) export class AppModule {} ```

Usage:

In your view, add:

html <!-- Other content --> <mama-stack-blur [imageUrl]="image.url" [width]="image.width" [height]="image.height"> </mama-stack-blur> <!-- Other content -->

or for multiple images:

html <!-- Other content --> <mama-stack-blur *ngFor="let image of images; let i = index" [imageUrl]="image.url" [width]="image.width" [height]="image.height" [radius]="i"> </mama-stack-blur> <!-- Other content -->

Options:

• [imageUrl] (required string) - url of an image to show and blur;
• [width] (required number) - width of an image;
• [height] (required number) - height of an image;
• [radius] (optional number, default is 10) - the radius of the blur;
• [blurAlpha] (optional boolean, default is false) - if you are blurring a RGBA image;