Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Implementando slides

4/23
Recursos

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.

Aportes 41

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Con base en la documentaci贸n con el nuevo parh ser铆a as铆:
@import 鈥榽swiper/css鈥;

Para los que est谩n instalando swiper les recomiendo realizar la instalaci贸n de la versi贸n 8 ya que actualmente las versiones superiores no cuentan con la parte modular.

npm install swiper@8.4

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

  1. Debes instalar el Swiper:
npm i swiper
  1. Importar el modulo en app.module:
import { SwiperModule } from 'swiper/angular'; 

Y tambi茅n ponerlo en el NGModule:

imports: [ SwiperModule ]
  1. 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:
https://swiperjs.com/angular

Nunca pares de aprender 鉂わ笍

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

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

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;
    }
  }
}

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

<h1>{{ product.title }}</h1>
<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.

  1. Instalar el Swiper:
npm i swiper
  1. 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 {}
  1. 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';

  1. 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

  1. 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>
    <h1>{{ productChosen.title }}</h1>

    <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 agregu茅 algunos estilos a la App para qu茅 quedar谩 mejor

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();
      }

    });
  }

Actualmente Swiper est谩 en su versi贸n 9 pero solamente hasta la 8.4.7 est谩 soportada para Angular
entonces hay que hacer npm i [email protected]

Y con eso ya se pueden guiar por la documentaci贸n para la V8:
https://v8.swiperjs.com/angular

Codigo de ejemplo de Swiper:

<swiper
[slidesPerView]=鈥3鈥
[spaceBetween]=鈥50鈥
(swiper)=鈥渙nSwiper($event)鈥
(slideChange)=鈥渙nSlideChange()鈥
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
</swiper>

swiper me jodiste

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 馃槮

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';

bootstrap tambien maneja slices bueno un poco mas facil de implementar

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

Swiper

Por si tienen problemas con el swiper:

  1. En el package.json colocar 鈥渟wiper鈥: 鈥6.8.0鈥, y hacer npm i

  2. Importar en el app.module> import { SwiperModule } from 鈥榮wiper/angular鈥;

  3. en el Styles.scss colocar > @import 鈥榽swiper/swiper.scss鈥;

Y no se preocupen si ven que la misma url de la imagen no muestra la misma, cambia por segundo.

La versi贸n actual ya no tiene soporte para Angular, por lo que se debe instalar con:

npm i [email protected]

La documentaci贸n se puede obtener con el enlace:
(https://v8.swiperjs.com/angular)

#Arreglando Swipper
Si como yo est谩s haciendo este curso en 2023, el swiper no te funcionar谩 ya que con

npm i swiper

se te instalar谩 la version 10 cuando solo dan soporte para angular hasta la 8:

npm install swiper@8.4.6

Esta es su documentaci贸n correspondiente:
https://v8.swiperjs.com/angular

Implementando Slider, pero con Boostrap 5.0

# Primero Instalamos la Librer铆a en el Directorio del Proyecto
ng add @ng-bootstrap/ng-bootstrap

# Importamos la Librer铆a
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Finalemte la implementamos al proyecto

<div *ngIf="productChosen" class="product-detail" [class.active]="showProductDetail">
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" *ngFor="let img of productChosen.images; index as i" class="carousel-item" [class.active]="i === indexImgActivate"
      data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    </div>
    <div class="carousel-inner">
      <div *ngFor="let img of productChosen.images; index as i" class="carousel-item" [class.active]="i === indexImgActivate" >
        <img [src]="img" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev" (click)="onPrevImage()">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next" (click)="onNextImage()">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  <h1>{{ productChosen.title }}</h1>
  <p>{{ productChosen.description }}</p>
  <button (click)="onToogleProductDetail()">Close</button>
</div>

Hay que crear, una variable y dos funciones adicionales

indexImgActivate = 0;

  onPrevImage() {
    if (this.indexImgActivate > 0) {
      this.indexImgActivate -= 1;
    } else {
      this.indexImgActivate = this.productChosen.images.length-1;
    }
  }

  onNextImage() {
    if (this.indexImgActivate<this.productChosen.images.length-1) {
      this.indexImgActivate += 1;
    } else {
      this.indexImgActivate = 0;
    }
  }

Swiper esta totalmente cambiado tratando de ser pago imposible de implementar actualmente, mas en un curso

Para seguir el v铆deo, toca instalar swiperv8. https://v8.swiperjs.com/angular

npm i swiper@8

Para importar los estilos: @import '~swiper/scss';

Me costo un poco. Y ojala aqui haya alguien que sepa mucho Angula para orientarme mas.

Lo que hice fue separar el componente de product-detail en su correspondiente componente, mediante la comunicacion de componentes le pase el 鈥減roductChoosen鈥 para que pudiera cargar la data.
Mi dolor de cabeza comenzo fue cuando comence a manejar lo que yo llamaria el estado de 鈥渟howProductDetail鈥 y dure casi 4 horas leyendo e investigando a lo que plantee la siguiente solucion.

En el store service cree un Observable que me permitiera escuchar el estado de manera constante:

StorageService

//storage.service.ts
 private showProductDetail = false;
  private showProduct = new BehaviorSubject<boolean>(this.showProductDetail);
  showProduct$ = this.showProduct.asObservable();


  toogleProduct(){
    this.showProductDetail = !this.showProductDetail;
    this.showProduct.next(this.showProductDetail)
  }

Luego en el componente de product detail lo que hice fue almacenar el estado y modificarlo manejando el servicio.

Componente product-datail

//product-detail.component.ts
 constructor(private storeService: StoreService) { }
  showProductDetail = false
  showProduct$ = this.storeService.showProduct$

  ngOnInit(){
    this.storeService.showProduct$.subscribe(state => {
      this.showProductDetail = state
    })
  }

  toggleProductDetail() {
    this.storeService.toogleProduct()
  }

Me quedo un sin sabor de boca por todo el tiempo que me demore en esto, y segundo porque siento que debe existir una manera mas sencilla y mucho mejor de hacer exactamente lo mismo.

Con un poco de desanimo les comparto mi aporte.

Me descargu茅 los archivos de la clase, y me sigue sin funcinoar el swiper

Espero que alguien le sirva de ayuda
Para que me funcione swiper lo importe en el archivo de estilos del componente y del style general.
Adem谩s, importe las siguientes l铆neas en el archivo products.component.scss


@import 鈥榮wiper/css鈥;
@import 鈥榮wiper/css/bundle鈥;
@import 鈥榮wiper/css/a11y鈥;
@import 鈥榮wiper/css/navigation鈥;
@import 鈥榮wiper/css/pagination鈥;

y en el archivo styles.scss importe lo siguiente


@import 鈥榮wiper/css鈥;

@import 鈥榮wiper/css/bundle鈥;

Para que les funcione el paginador de slides, deben agregar las siguientes lineas en el app.module.ts.

import { SwiperModule } from 'swiper/angular';
import SwiperCore, { Pagination } from "swiper";
SwiperCore.use([Pagination]);
Para mas informaci贸n sobre la ultima versi贸n que contiene el modulo de Angular en swiper: visiten <https://v8.swiperjs.com/angular>
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: 1. 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",". 2. Luego ejecute npm i para que node refresque los paquetes y librer铆as. 3. Listo! siga los pasos de esta clase y deber铆a funcionar
En este curso recomiendo actualizar la api y el swiper ya que el swiper hoy en dia no es recomendable usar en angular ya que ya no funciona, al consumir la api de ejemplo solo sale algunas imagenes y otras sale que caducaron y sale error 404 que no esta funcionando entonces yo recomiendo que lo arreglen a la brevedad posible ya que este curso sin esos dos recursos tan necesario el curso se vuelve obsoleto

Asi implemente el swiper y me funciona.

npm i swiper (instalar version mas reciente)
En el archivo styles.scss
@import 鈥榮wiper/css/bundle鈥;
En el .ts a utilizar swiper
import Swiper from 鈥榮wiper鈥;

Les comparto dos alternativas para Swiper:

Owl Carousel.
Slick Carousel.

No est谩n dise帽adas espec铆ficamente para Angular, pero se puede integrar utilizando directivas personalizadas.

npm install [email protected]
Por si no les servia la nueva version de swiper

Ya parece que no funciona swiper para angular (peque帽o detalle)

Utilicen este comando y pueden seguir el video, npm i [email protected] --save

Si est谩n usando Angular 15 y Swiper 8:

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 { 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';

@NgModule({
  declarations: [
    AppComponent,
    ImgComponent,
    ProductComponent,
    ProductsComponent,
    NavComponent,
    ReversePipe,
    TimeAgoPipe,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SwiperModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y para los estilos: @import 'swiper/scss';

Para usar los modules de navegacion de swipper en Angular deben importar lo siguiente:

import SwiperCore, { Navigation, Pagination, Scrollbar } from 'swiper';

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar])

Si alguien tuvo problemas al instalar o aparece un error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

yo utilice estos comandos

  1. npm install --legacy-peer-deps
  2. npm install
  3. npm audit fix
  4. npm i swiper

Si utilizan css, importar en el styles.css lo siguiente
@import 鈥榽swiper/swiper.min.css鈥;
@import 鈥榽swiper/modules/navigation/navigation.min.css鈥;
@import 鈥榽swiper/modules/pagination/pagination.min.css鈥;

Utilizando nuestro componente de imagenes

<h1>{{productChosen.title}}</h1>
    <swiper [slidesPerView]="1">
    <ng-template swiperSlide *ngFor="let imag of productChosen.images">
      <app-img [img]="imag"></app-img>
    </ng-template>
    </swiper>
    <p>{{productChosen.description}}</p>