Carousel

Instrucciones detalladas de como añadir el componente del Carousel y así utilizarlo en nuestro proyecto de Angular.

Lo primero que necesitamos es importar el módulo que tenemos para utilizar el componente y visualizar los items con la imagen de fondo y haciendo click sobre ella, nos redireccionará a la url almacenada

Módulo

// your.module.ts
import { NgModule } from '@angular/core';
import { CarouselItemsModule } from '@mugan86/ng-shop-ui';​
@NgModule({  
    declarations: [YourComponent],  
    imports: [    ...    CarouselItemsModule  ]
})
export class YourModule { }

Componente

Cargamos los items del Carousel, usando esta referencia por ejemplo.

784B

carousel.json

La estructura de los productos deberá de ser la siguiente:

export interface ICarouselItem {    
    id: number | string;        // Identificador    
    title: string;              // Título    
    description: string;        // Descripción    
    background: string;         // URL de la imagen del fondo    
    url: string;                // URL destino cuando hagamos click}

Teniendo en cuenta esta estructura, tenemos que usarla dentro del componente, añadiendo la lista de los elementos del Carousel.

import { ICarouselItem } from '@mugan86/ng-shop-ui/lib/interfaces/carousel-item.interface';

export class YourComponent implements OnInit {  
    items: ICarouselItem[] = [];​  
    ngOnInit(): void {    
        this.items = // Traer los valores cargados en el carousel.json u otros  }
    }
}

Pasar la información

<shop-carousel-items [items]="items"></shop-carousel-items>