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.
Informatica ITE
Con base en la documentación con el nuevo parh sería así: @import '~swiper/css';
Kevin Zavala
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
Grande TIP, justo me daba error en el import.
Gracias.
Al día de hoy creo que a cambiado un poco. No me dio error en la instalación de la siguiente manera:
npm i swiper
import { SwiperModule } from 'swiper/angular';
Y también ponerlo en el NGModule:
imports: [ SwiperModule ]
@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
Jesús Alexis Tenorio Hernández
Jhoseph Stanly Arango Garcia
Bien hecho
Pol Valle
Hoy he descubierto que el amor de verdad existe, gracias
Sabad Josue Perez Rodriguez
Es necesario actualizar este video, swiper cambio muchisimo en su ultima versión
Javier Alonso Rojas Butrón
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
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
Gracias, esto me funcionó
Alejandro Mejia Escobar
Christian Michelle Torres Martínez
Así es, yo tmbn lo separe por mejor práctica
Hugo Bustamante
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
helmut martinez
Siiiiiuuuu muchas gracias
Oscar Reyes
Leandro Andres Suarez Vece
Gracias buen hombre me ahorraste un tiempo!
Jorge Valero
gracias !!
Andres López
Le agregué algunos estilos a la App para qué quedará mejor
Alexis Franco
Excelente me gustaría poder leer los estilos que usaste. Saludos.
Andres López
Los puedes ver el repo en GitHub: https://github.com/bl00p1ng/Ecommerce-Angular
Earvin Saúl Pérez Ramos
Alan Avelino
Eres grande crack!
Gabriel Diaz
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
Acabo de subir una sugerencia con Boostrap, si puedes aplicala, funciona sin problemas .. esta entre los aportes .
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
como le hago cuando dice que la version 9 Swiper fue removido de Angular?
Renata Mavelyn Dubon Madrid
x2
Diego Fernando Caceres Garcia
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
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
me paso lo mismo. ... :( Sin solucion aun
Mauricio Vargas García
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:
Ruth Lovece
Gracias 💚
Giovanni Andres Alzate Agudelo
swiper me jodiste
Yokasta Leis
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
GRACIAS!
Jhon Stiven Granada Acevedo
bootstrap tambien maneja slices bueno un poco mas facil de implementar
LUIS ANTONIO CALVO QUISPE
Acabo de subir una sugerencia con Boostrap, si puedes aplicala, funciona sin problemas … esta entre los aportes .
Miguel Arturo Del Angel
Esto lo voy a usar para mi proyecto del trabajo 8)
David Castro
Jajaja seguro que si. Yo tambien he aprendido muchas cosas que tambien me son utiles en mi estudio y trabajo.
Reinaldo Mendoza
Swiper
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
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>
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
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.
npm i swiper
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 {}
import { AfterViewInit, Component, ElementRef, ViewChild, OnInit } from '@angular/core'; . . . import { register } from 'swiper/element/bundle'; import { Swiper } from 'swiper/types';
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
<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.
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(); } }); }
