Gallery

NPM

npm i ng-gallery @angular/cdk

• 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.

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
    }
  ]
})

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';