Showing posts with label ng-gallery. Show all posts
Showing posts with label ng-gallery. Show all posts
<img src="" height="250" width="250"></img> <br> ng-gallery


September 07, 2017
Angular image gallery simplifies the process of creating a beautiful image gallery for the web and mobile devices.


Install it with npm
 npm install --save ng-gallery  


If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-gallery:
 map: {  
  'ng-gallery': 'node_modules/ng-gallery/bundles/ng-gallery.umd.js',  
Here is a live plunkr


Import GalleryModule and set the gallery configuration in your root module
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  import { GalleryModule } from 'ng-gallery';  
  export const galleryConfig : GalleryConfig = {  
   // ...  
   imports: [  
    // ...  
After that you will be able to use Gallery's components and there is two options:
  • <gallery></gallery> : to insert the gallery right in the template, see basic example
  • <gallery-modal></gallery-modal> : to open the gallery in a modal, see modal example
One final step is to fill the gallery with images and there is two options:
  • Using GalleryService
  •  constructor(private gallery: GalleryService) { }  
     ngOnInit() {;  
  • Using [gallerize] directive

Gesture Support (optional)

Gallery Module relies on HammerJS for gestures, make sure it is loaded into the application.
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 install --save hammer.js
After installing, import it on your app's root module
 import 'hammerjs';  

Note: Special thanks to Murhaf Sousli
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.