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

Jorge Caloir

student•

vamos por mi primer empleeeo

Setup de Angular para SPAs

Preparación para la prueba

Tu primer día de trabajo como Angular Developer

Setup de Angular para SPAs

Optimiza una landing page con Angular

Solución de la prueba

Angular con dependencias optimizadas

Optimizando Angular con Lighthouse

Server Side Rendering en Angular

Animaciones en Angular

Próximos pasos