Gallery

Installation

NPM

npm i ng-gallery @angular/cdk

Usage

• For basic usage, see Gallery Example | Basic Example Demo.
• For adding mutliple items types (image, video, youtube, iframe), see Mixed Content | Mixed Content Demo
• For custom templates, see the Advanced Example | Advanced Example Demo.

Set global config

To set global config without loading the library in the root module, use the GALLERY_CONFIG token

Example:

import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: GALLERY_CONFIG,
      useValue: {
        autoHeight: true,
        imageSize: 'cover'
      } as GalleryConfig
    }
  ]
})

Mouse Sliding (optional)

The gallery relies on HammerJS to support dragging the slider using the mouse, if you don't want this feature you can skip installing HammerJS.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

NPM

npm i hammerjs

After installing, import it in main.ts

import 'hammerjs';