Integración de Swiper en Angular para Galería de Productos

Clase 4 de 23 • Curso de Consumo de APIs REST con Angular

Contenido del curso

Http Basic

Buenas prácticas

Auth

Archivos

Despedida

23
Consumo de APIs en Angular con HTTP y Autenticación
01:09 min

Tomar examen

Resumen

Una necesidad crucial cuando se trabaja con Angular es la importación de componentes de terceros para un rápido desarrollo y utilización de los mismos.

Cómo importar componentes de terceros

Anímate a crear un carrusel de imágenes utilizando librerías como SwiperJS. Luego, instala la dependencia con el comando npm i swiper e impórtala en el módulo principal de tu aplicación para que esté lista para utilizarse.

import { SwiperModule } from 'swiper/angular';
@NgModule({
  imports: [SwiperModule],
})
export class AppModule {}

Es importante que sepas importar y utilizar este tipo de componentes ya listos para ser utilizados y agilizar así el desarrollo de cualquier aplicación.

API de Prueba

Existen muchas API gratuitas que puedes utilizar para practicar y construir aplicaciones, te comparto las más populares para que las investigues

Anímate a explorar estas API y diviértete desarrollando aplicaciones y practicando todo lo que ya sabes sobre Angular hasta aquí. Más adelante en el curso verás cómo potenciar el consumo de API con Angular y sacarle mayor provecho a este framework.

Contribución creada por: Kevin Fiorentino.

Comentarios

Informatica ITE

student•

Con base en la documentación con el nuevo parh sería así: @import '~swiper/css';

Kevin Zavala

student•

Justo fue lo que me funcionó, tenía el problema en que se renderizaban las fotos hacia abajo y todas se movían. Thanks!!

John Ruiz

student•

Grande TIP, justo me daba error en el import.

Gracias.

Darwing Steven Sánchez Londoño

student•

Al día de hoy creo que a cambiado un poco. No me dio error en la instalación de la siguiente manera:

Debes instalar el Swiper:

npm i swiper

Importar el modulo en app.module:

import { SwiperModule } from 'swiper/angular';

Y también ponerlo en el NGModule:

imports: [ SwiperModule ]

Importar los siguientes 3 estilos a los globales styles.scss:

@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';

Espero te ayude, por ahora no me dio error, no sé si mas adelante lo haga jaja. No olvides mirar la documentación oficial:

Nunca pares de aprender <3

Emmanuel Lopez Leyva

student•

Muchas gracias, muy buena explicación. Eres grande

Jesús Alexis Tenorio Hernández

student•

Actualizacion para Swiper a la version reciente

Primero instalamos swiper:

npm install swiper

Les va a instalar la mas nueva. ^9.3.2 Despues agregamos esto a app.module.ts:

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { register } from 'swiper/element/bundle';
register();
schemas: [CUSTOM_ELEMENTS_SCHEMA]

asi:

Y ya con eso estaria funcionando. No es necesario que se agreguen estilos por el momento como se ve en el video. Para renderizarlo en el componente .html se debe escribir asi:

Las clases que agregue no tienen nada que ver. Son simplemente estilos propios. Lo importante son las etiquetas:

<swiper-container> y <swiper-slide>

Son la nueva forma de escribirlas.

Les dejo la documentacion: https://swiperjs.com/element

Espero les sirva

Jhoseph Stanly Arango Garcia

student•

Bien hecho

Pol Valle

student•

Hoy he descubierto que el amor de verdad existe, gracias

Sabad Josue Perez Rodriguez

student•

Es necesario actualizar este video, swiper cambio muchisimo en su ultima versión

jav rba

student•

Tuve que instalar la versión 8.4+ y con instrucciones de la documentación correspondiente a la versión, pero aún así las imágenes que me aparecen todas hacía abajo al apretar el botón.

David Palacio

student•

hola, miren para que puedan los nuevos que vana entrar a este curso, ya que el curso tiene bastante tiempo y al seguir los pasos del profe a algunos les va a dar un error hagan esto: en su terminal van a escribir para instalar

npm i swiper@8.4.7

y despues van a ir a la documentacion: https://v8.swiperjs.com/angular

y en su sccss van a pegar esto:

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url(./styles/reset.scss);
@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';
* {
  font-family: 'Quicksand', sans-serif;
}

.products--grid {
  app-img {
    img {
      border-radius: 10px;
      max-height: 200px;
    }
  }
}

Brayan Camilo Bolivar Muñoz

student•

Gracias, esto me funcionó

Alejandro Mejia Escobar

student•

Considero que una buena práctica sería separar el detall del contenido en un nuevo componente product-detail

<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
<swiper
    [slidesPerView]="1"
>
    <ng-template swiperSlide *ngFor="let img of product.images">
        <img [src]="img" [alt]="product.title">
    </ng-template>
</swiper>
<p>{{ product.description }}</p>

Christian Michelle Torres Martínez

student•

Así es, yo tmbn lo separe por mejor práctica

Hugo Bustamante

student•

Ilustrame como acomodarías los métodos en el nuevo componente buen hombre :D. No he podido separar toda la parte del detalle del producto en un solo componente

Brayan Daniel Chacón Arrascue

student•

Para que te funcione correctamente el Swipper debes hacer lo siguiente:

En la consola ejecutar lo siguiente para instalar Swipper

npm i swiper

De ahi en el app.module.ts lo deben poner asi.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { SwiperModule } from 'swiper/angular';
import SwiperCore, { Pagination } from "swiper";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImgComponent } from './components/img/img.component';
import { ProductComponent } from './components/product/product.component';
import { ProductsComponent } from './components/products/products.component';
import { NavComponent } from './components/nav/nav.component';
import { ReversePipe } from './pipes/reverse.pipe';
import { TimeAgoPipe } from './pipes/time-ago.pipe';
import { HighlightDirective } from './directives/highlight.directive';

SwiperCore.use([Pagination]);

@NgModule({
  declarations: [
    AppComponent,
    ImgComponent,
    ProductComponent,
    ProductsComponent,
    NavComponent,
    ReversePipe,
    TimeAgoPipe,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SwiperModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y en los estilos globales agregar esto

@import '~swiper/scss';

y listo ya estaria y funcionaria correctamente

helmut martinez

student•

Siiiiiuuuu muchas gracias

Oscar Reyes

student•

En este capítulo me dio problemas al querer implementar Swiper Element revisando la documentación, hicieron una actualización y ahora se implementa de otra forma. Les comparto como lo implemente por si alguien más se atora en este paso.

Instalar el Swiper:

npm i swiper

En el archivo app.module.ts agregue CUSTOM_ELEMENTS_SCHEMA al decorador ++@NgModule++, esto porque no reconoce ++swiper-container++ y ++swiper-slide++, también lo agregue en el import

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

En el decorador sería de la siguiente manera:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

En el archivo products.component.ts agregué los siguientes imports

import { AfterViewInit, Component, ElementRef, ViewChild, OnInit } from '@angular/core';
.
.
.
import { register } from 'swiper/element/bundle';
import { Swiper } from 'swiper/types';

Agregue en ++implementes++ AfterViewInit en la clase y agregue el decorador ViewChild.

export class ProductsComponent implements OnInit, AfterViewInit {
.
.
.
@ViewChild('swiper')
  swiperRef: ElementRef | undefined;
  swiper?: Swiper;

  ngAfterViewInit(): void {
    register();
    this.swiper = this.swiperRef?.nativeElement.swiper;
  }

Nota: El ngAfterViewInit lo agregué para poder hacer el register() ya que en la documentación dice que se tiene que llamar antes de utilizarlo

En el archivo products.component.html continué con el ejemplo del curso, quedando así:

<div class="product-detail" [class.active]="showProductDetail">
  <div *ngIf="productChosen">
    <button (click)="toggleProductDetail()">Colse</button>
    <h2>{{ productChosen.title }}</h2>

    <swiper-container #swiper initial-slide="0" pagination="true" slides-per-view="1">
      <swiper-slide *ngFor="let img of productChosen.images">
        <img [src]="img" width="100%" alt="{{ productChosen.title }}" />
      </swiper-slide>
    </swiper-container>

    <p>{{ productChosen.description }}</p>
  </div>
</div>

Saludos.

Leandro Andres Suarez Vece

student•

Gracias buen hombre me ahorraste un tiempo!

Jorge Valero

student•

gracias !!

Andres López

student•

Le agregué algunos estilos a la App para qué quedará mejor

Alexis Franco

student•

Excelente me gustaría poder leer los estilos que usaste. Saludos.

Andres López

student•

Los puedes ver el repo en GitHub: https://github.com/bl00p1ng/Ecommerce-Angular

Earvin Saúl Pérez Ramos

student•

Le puse la siguiente lógica al código de onShowDetails

onShowDetails(id:string){
    //en caso de que den dos veces al botón solo ocultara los detalles(para no ir a darle al botón de cerrar)
    if(this.productChosen.id != '' && this.productChosen.id == id && this.showProductDetail==true){
      this.showProductDetail = false;
      return;
    }

    //en caso de que seleccionen el mismo producto ya no hay necesidad de hacer la petición de nuevo y solo vuelve a mostrar el panel
    if(this.productChosen.id != '' && this.productChosen.id == id && this.showProductDetail==false){
      this.showProductDetail = true;
      return;
    }
    //en caso que le den al botón de ver detalles mientras ya están abiertos los de un producto diferente cierra el panel de detalles
    if(this.productChosen.id != '' && this.productChosen.id != id && this.showProductDetail==true){
      this.showProductDetail = false;
    }

    this.productService.getProduct(id)
    .subscribe(data => {
      this.productChosen = data;
      if(!this.showProductDetail){
        this.toggleProductDetail();
      }

    });
  }

Alan Avelino

student•

Eres grande crack!

Gabriel Diaz

student•

creo que deberian cambiar el curso nada mas por implementar swiper. Esta herramienta cambio mucho y los estudiantes estan teniendo muchos porblemas para seguir el hilo por los cambios en la implementacion :(

LUIS ANTONIO CALVO QUISPE

student•

Acabo de subir una sugerencia con Boostrap, si puedes aplicala, funciona sin problemas .. esta entre los aportes .

Antonella Soledad Castagna

student•

Codigo de ejemplo de Swiper:

<swiper [slidesPerView]="3" [spaceBetween]="50" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()" > <ng-template swiperSlide>Slide 1</ng-template> <ng-template swiperSlide>Slide 2</ng-template> <ng-template swiperSlide>Slide 3</ng-template> </swiper>

Moises Jesus Duarte

student•

como le hago cuando dice que la version 9 Swiper fue removido de Angular?

Renata Mavelyn Dubon Madrid

student•

Diego Fernando Caceres Garcia

student•

A alguien más le sale este error por casualidad?

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

Si es así, lo han podido solucionar¿?

Omar Daniel Centeno

student•

Hola

Puede ser que el error se deba a una diferencia entre las versiones 7 y 8 de saas-loader ¿qué versión estás utilizando actualmente?

Antonio Luis Fernandez Dromundo

student•

me paso lo mismo. ... :( Sin solucion aun

Mauricio Vargas García

student•

Hola compañeros, si alguien llega a tener problemas instalando swiper, lamentablemente swiper eliminó el modulo para Angular en sus versiones mas recientes, puedes instalar la versión 8.4.6, que es la ultima que tiene el módulo, para esto:

Vayan a package.json en la carpeta razi de sus proyectos e identifique "swiper": "^10.X.X", cambie la versión y dejelo así: ""swiper": "^8.4.6",".
Luego ejecute npm i para que node refresque los paquetes y librerías.
Listo! siga los pasos de esta clase y debería funcionar

Ruth Lovece

student•

Gracias 💚

Giovanni Andres Alzate Agudelo

student•

swiper me jodiste

Yokasta Leis

student•

Se me presentó un problema/error ( Error: Module build failed) al momento de importar los estilos ya que estoy usando css.

Buscando pude resolverlo importándolos así:

@import '~swiper/swiper.min.css';
@import '~swiper/modules/navigation/navigation.min.css';
@import '~swiper/modules/pagination/pagination.min.css';

Angela Sierra

student•

GRACIAS!

Jhon Stiven Granada Acevedo

student•

bootstrap tambien maneja slices bueno un poco mas facil de implementar

LUIS ANTONIO CALVO QUISPE

student•

Acabo de subir una sugerencia con Boostrap, si puedes aplicala, funciona sin problemas … esta entre los aportes .

Miguel Arturo Del Angel

student•

Esto lo voy a usar para mi proyecto del trabajo 8)

David Castro

student•

Jajaja seguro que si. Yo tambien he aprendido muchas cosas que tambien me son utiles en mi estudio y trabajo.

Reinaldo Mendoza

student•

Swiper

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url(./styles/reset.scss);
@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';
* {
  font-family: 'Quicksand', sans-serif;
}

.products--grid {
  app-img {
    img {
      border-radius: 10px;
      max-height: 200px;
    }
  }
}

<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
<swiper
    [slidesPerView]="1"
>
    <ng-template swiperSlide *ngFor="let img of product.images">
        <img [src]="img" [alt]="product.title">
    </ng-template>
</swiper>
<p>{{ product.description }}</p>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { SwiperModule } from 'swiper/angular';
import SwiperCore, { Pagination } from "swiper";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImgComponent } from './components/img/img.component';
import { ProductComponent } from './components/product/product.component';
import { ProductsComponent } from './components/products/products.component';
import { NavComponent } from './components/nav/nav.component';
import { ReversePipe } from './pipes/reverse.pipe';
import { TimeAgoPipe } from './pipes/time-ago.pipe';
import { HighlightDirective } from './directives/highlight.directive';

SwiperCore.use([Pagination]);

@NgModule({
  declarations: [
    AppComponent,
    ImgComponent,
    ProductComponent,
    ProductsComponent,
    NavComponent,
    ReversePipe,
    TimeAgoPipe,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SwiperModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

export class ProductsComponent implements OnInit, AfterViewInit {
.
.
.
@ViewChild('swiper')
  swiperRef: ElementRef | undefined;
  swiper?: Swiper;

  ngAfterViewInit(): void {
    register();
    this.swiper = this.swiperRef?.nativeElement.swiper;
  }

<div class="product-detail" [class.active]="showProductDetail">
  <div *ngIf="productChosen">
    <button (click)="toggleProductDetail()">Colse</button>
    <h2>{{ productChosen.title }}</h2>

    <swiper-container #swiper initial-slide="0" pagination="true" slides-per-view="1">
      <swiper-slide *ngFor="let img of productChosen.images">
        <img [src]="img" width="100%" alt="{{ productChosen.title }}" />
      </swiper-slide>
    </swiper-container>

    <p>{{ productChosen.description }}</p>
  </div>
</div>

onShowDetails(id:string){
    //en caso de que den dos veces al botón solo ocultara los detalles(para no ir a darle al botón de cerrar)
    if(this.productChosen.id != '' && this.productChosen.id == id && this.showProductDetail==true){
      this.showProductDetail = false;
      return;
    }

    //en caso de que seleccionen el mismo producto ya no hay necesidad de hacer la petición de nuevo y solo vuelve a mostrar el panel
    if(this.productChosen.id != '' && this.productChosen.id == id && this.showProductDetail==false){
      this.showProductDetail = true;
      return;
    }
    //en caso que le den al botón de ver detalles mientras ya están abiertos los de un producto diferente cierra el panel de detalles
    if(this.productChosen.id != '' && this.productChosen.id != id && this.showProductDetail==true){
      this.showProductDetail = false;
    }

    this.productService.getProduct(id)
    .subscribe(data => {
      this.productChosen = data;
      if(!this.showProductDetail){
        this.toggleProductDetail();
      }

    });
  }

Integración de Swiper en Angular para Galería de Productos

Http Basic

Conexión a REST APIs con Angular HTTP y buenas prácticas

Solicitudes GET en APIs con Angular: Obtener Productos

Consulta de Producto Específico en eCommerce con Angular