Setup de Angular para SPAs

Clase 2 de 8 • Laboratorio de Angular: Optimización Web con Lighthouse y SSR

Clase anteriorSiguiente clase

Diego Guzmán

student•

Ya no esta disponible Swiper para angular :,(

jose zuñiga

student•

No como paquete directo, pero lo puedes instalar y configurar mediante un provider. Aunque si es un slider simple que vas a agregar es mejor usar css o angular bootstrap.

Si definitivamente deseas requieres usar Swiper sigue estos pasos:

npm install swiper
En el modulo que lo uses en este caso te dejo app.mpdules.ts o en el stanAlone component deberás agregar:

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

import { register } from 'swiper/element/bundle';
register();

@NgModule({
	... código anterior
	bootstrap: [AppComponent],

	schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
```3. En tu componente ya puedes usar sus etiquetas:

```js
      <swiper-container slides-per-view="1" navigation="true" pagination="true" scrollbar="true">
        <div slot="container-start">Rendered before wrapper</div>
        <swiper-slide *ngFor="let imageChosen of productChosen.images">
	        <img src="https://www.motor.com.co/__export/1651004329036/sites/motor/img/2022/04/26/20220426_021848838_60f1d0133366b_r_1626460411031_420-517-1528-1071.jpeg_759710130.jpeg" alt="">
	      </swiper-slide>
        <div slot="container-end">Rendered after wrapper</div>
      </swiper-container>
```La verdad si no usas alguna animación especial como el cubo de swiper no recomiendo complicarse con su instalación y uso