Instalar NgxGallery angular 8

Lo primero que debemos hacer es ir a la página oficial de este plugin https://github.com/lukasz-galka/ngx-gallery

En este lugar nos muestran cómo realizar la instalación del mismo y los requisitos que necesitamos para que funcione perfectamente. En nuestro caso nos dio problema la biblioteca llamada Hammerjs ya que aquí no nos enseñan como es que funciona en angular, por eso nos decidimos hacer este tutorial. Aclaramos que este tutorial esta dedicado solo a angular 8 porque en la página explican otros casos que no mencionaremos en este momento; como Angular Material y SystemJs.

Vamos a hacerlo entonces.

Lo primero que tendremos que hacer es según la página antes mencionada es instalar la biblioteca Font Awesome mediante el siguiente código:

npm install font-awesome --save

luego de esto nos dirigimos al archivo angular-cli.json que se encuentra en la raíz de nuestro proyecto y buscamos la parte donde se agregan los estilos de nuestro proyecto y agregamos lo siguiente:

"styles": [

"node_modules/font-awesome/css/font-awesome.css"
]

Lo siguiente que debemos hacer es instalar la biblioteca Hammerjs; esta biblioteca es la que nos costo un poco mas de trabajo ponerla en funcionamiento ya que no se encuentra nada en esta pagina que nos explique como agregarlo a nuestro proyecto. Bueno en realidad dicen que con agregar

import 'hammerjs';

funciona, pero en nuestro caso tuvimos que hacer otras cosas porque con esto solamente nos daba error y la biblioteca no funcionaba.

Aquí les mostramos que hicimos.

Lo primero fue instalar la biblioteca normalmente.

npm install hammerjs --save

seguido a esto agregamos las siguientes líneas de código en el archivo app.module.ts antes de la palabra @NgModule estas líneas no vienen descritas en la página antes mencionada.

// app.module.ts
...

/* Custom Hammer configuration */
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';

export class CustomHammerConfig extends HammerGestureConfig {
  overrides = {
    'pan': {
      direction: Hammer.DIRECTION_ALL,
    }
  }
}
/* End Custom hammer configuration */
...

@NgModule({
    imports: [
        ... 
        ...
    ],
    providers: [
       {provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig}
    ],
    ...
})
export class AppModule { }

Ya con esto tenemos la biblioteca hammer funcionando correctamente, lo que nos faltaría seria instalar ng-gallery y para esto utilizamos el siguiente comando:

npm install ngx-gallery --save

Una vez instala la librería la forma de usarla sería la siguiente:
Agregamos los siguientes fragmentos de código en el archivo app.module.js

// app.module.ts

...

import { NgxGalleryModule } from 'ngx-gallery';
...
@NgModule({
    imports: [
        ...
        NgxGalleryModule
        ...
    ],
    ...
})
export class AppModule { }

Seguido a esto en el componente donde vallamos a utilizar el plugin agregamos los siguientes fragmentos de código.

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
...

@Component({
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
    galleryOptions: NgxGalleryOptions[];
    galleryImages: NgxGalleryImage[];

    ngOnInit(): void {

        this.galleryOptions = [
            {
                width: '600px',
                height: '400px',
                thumbnailsColumns: 4,
                imageAnimation: NgxGalleryAnimation.Slide
            },
            // max-width 800
            {
                breakpoint: 800,
                width: '100%',
                height: '600px',
                imagePercent: 80,
                thumbnailsPercent: 20,
                thumbnailsMargin: 20,
                thumbnailMargin: 20
            },
            // max-width 400
            {
                breakpoint: 400,
                preview: false
            }
        ];

        this.galleryImages = [
            {
                small: 'assets/1-small.jpg',
                medium: 'assets/1-medium.jpg',
                big: 'assets/1-big.jpg'
            },
            {
                small: 'assets/2-small.jpg',
                medium: 'assets/2-medium.jpg',
                big: 'assets/2-big.jpg'
            },
            {
                small: 'assets/3-small.jpg',
                medium: 'assets/3-medium.jpg',
                big: 'assets/3-big.jpg'
            }
        ];
    }
}

En al archivo .html correspondiente a este módulo agregamos lo siguiente:

// app.component.html

<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

Realizado todos estos pasos la librería debería estar funcionando perfectamente.

Please follow and like us:
error

10 comments

  1. Hola.
    A usted le funciona este paquete con Angular 8?

    Yo le he instalado y me da muchos problemas, incluso está hecho con Angular 4.
    En Angular 8 cambiaron muchas cosas que causan incompatibilidades al tratar de usar ngx-gallery en Angular 8

    1. Hola Yunier..
      Este ejemplo que escribi en este post era cuando tenia angular 7 instalado. No lo he intentado utilizar con el angular 8. ademas para ser sincero no me gusta como funciona ya que es una biblioteca muy grande y tampoco me funciona en los telefonos el zoom.. yo utilizo una que es mas lijera si quieres te paso el link. cuando tenga un tiempito voy a intentar utilizarla en el angular 8 y te dejo saber…

Leave a Reply

Your email address will not be published. Required fields are marked *