How to implement Swiper v9 whit Ionic 📦 #6384
Replies: 2 comments 2 replies
-
|
Translated with www.DeepL.com/Translator (free version) How to implement Swiper v9 whit Ionic 📦During this recent update of the swiper package, one of the major concerns of the community is the implementation of the package in Angular and its use together with Ionic or other component libraries.I would love to write this post in English... but my ability with the language is very weak, and I prefer to do it with my native language 😉....this post was written with the purpose of helping new people looking to get started with the package or planning to update its dependencies, but being so recent... there seems to be no published solutions on the subject 😄, happy coding...Previously this package had a support for a component module that integrated very easily with Ionic/Angular ... in this version they make the jump to the native Web Component, which as such is not a problem for Angular, but it does break part of the installation structure and use of the same having to resort to the use of the stackoverflow.com/questions/75326426/how-to-use-swiper-9-with-angular
And I have seen some implementation examples with native **Angular ** and others with Ionic/Angular which have some similarity in their answers, they consist in delaying the
This represents for me a bad practice or maybe for others an effective solution, one of the answers in the Ionic team repository implies that yes, there is a delay in the way Swiper mounts and unmounts its components with the use of
Other users report the fact that when instantiating Swiper it does not start correctly due to the aforementioned delay and then there is the case that from Angular when referencing an
Steps to Reproduce <swiper-container [keyboard]="true" [pagination]="true" #swiper [init]="false" >
<swiper-slide> ... </swiper-slide>
</swiper-container>@ViewChild('swiper', { static: false }) swiper;
ngAfterViewInit(): void {
const params = {
modules: [
Keyboard,
Pagination,
Navigation,
IonicSwiper
]
};
Object.assign(this.swiper.nativeElement, params);
this.swiper.nativeElement.initialize(); // this will throw error
}At the moment of having the reference from an // @ts-ignore
this.swiper?.nativeElement.initialize() ( this.swiper?.nativeElement as any ).initialize()not to mention that when importing the Well maybe it is a lot of text... but if it is something uncomfortable since in discord and some other community I see that they are still in the v8 package and do not see light with this change, but they want to join the progress... I will show below what was the method that worked for me to install Swiper in my project ionic *v6 *with Angular v15.1.2.
Using the above mentioned approaches and concepts used, in my humble opinion I think this is the most subject option as we are used to use with Angular. <!-- We create our template as the example in the Swiper documentationWe create our template as the example in the Swiper documentation -->
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<swiper-container
#swiper
init="false"
navigation="true"
pagination="true"
scrollbar="true" >
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper-container>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>swiper-container {
width: 90%;
height: 100%;
}
swiper-slide {
text-align: center;
font-size: 18px;
background: lightgray;
height: 5rem;
width: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} @ViewChild("swiper", { static: false }) swiper?: ElementRef<{ swiper: Swiper }>
private swiperConfig?: SwiperOptions
constructor(
private modalController: ModalController,
) { }
ngOnInit() {
register()
this.swiperConfig = {
on: { init() { } }
}
if (this.swiper?.nativeElement) {
Object.assign(this.swiper?.nativeElement, this.swiperConfig);
}
}
ngAfterViewInit() {
console.log("ngAfterViewInit", this.swiper?.nativeElement.swiper);
}
ionViewDidEnter() {
console.log("ionViewDidEnter", this.swiper?.nativeElement.swiper);
}
ionViewWillEnter() {
console.log("ionViewWillEnter", this.swiper?.nativeElement.swiper);
}due to the delay caused by mounting and unmounting the
You may be wondering: *what to do in the case of using Angular without Ionic ? we could use the live hook
we could use the ngAfterViewInit() {
setTimeout((() => console.log("ngAfterViewInit", this.swiper?.nativeElement.swiper));
}
the funny thing is to see that our component without the Swiper, but if in console XD. The only thing left to do is to initialize the Swiper by fooling typeScript using the "tricks" mentioned a few paragraphs above // no Ionic
ngAfterViewInit() {
// @ts-ignore
setTimeout(() => this.swiper?.nativeElement.initialize());
}
// Ionic
ionViewDidEnter() {
// @ts-ignore
this.swiper?.nativeElement.initialize()
}I find and that's all... I just wanted to extend this post with the topic about register(injectStyles?:boolean) |
Beta Was this translation helpful? Give feedback.
-
|
Post Update: Important bug in method past to swiper instances because angular and the
this weird effect is more noticeable in nested routes It seems that when registering several swipers using the happy coding 😊 |
Beta Was this translation helpful? Give feedback.
-
|
We really need to figure out where this problem is coming from, I still think its Ionic and the ion-router-outlet but it could also be some wrong init process on Swiper side. Angular's router works fine. |
Beta Was this translation helpful? Give feedback.
-
|
in effect... the problem is how swiper mounts and unmounts the Web Component, and I add to that... the Angular router does not index in its tree, elements based on custom elements It's a mistake on both sides in my opinion. |
Beta Was this translation helpful? Give feedback.
-
How to implement Swiper v9 whit Ionic 📦
Durante esta actualización reciente del paquete swiper, una de las mayores preocupaciones de la comunidad es la implementacion del paquete en Angular y su uso junto a Ionic u otra libreria de componentes.
I would love to write this post in English... but my ability with the language is very weak, and I prefer to do it with my native language 😉...
this post was written with the purpose of helping new people looking to get started with the package or planning to update its dependencies, but being so recent... there seems to be no published solutions on the subject 😄, happy coding...
Anteriormente este paquete tenia un soporte para un modulo de componentes que se integraba muy facilmente con Ionic/Angular ... en esta version dan el salto a los Web Component nativos, que como tal no es un problema para Angular, pero si rompe en parte la esctrutura de instalacion y uso del mismo teniendo que recurir a el uso del
CUSTOM_ELEMENTS_SCHEMAy puede que algunos desarrolladores les pueda incomodar dejar expuesto la encapsulacion de sus componentes, pero a otros les da una ventaja con la llegada de los "Stand Alone Components" de **Angular **v15...stackoverflow.com/questions/75326426/how-to-use-swiper-9-with-angular
Y eh visto algunos ejemplo de implementacion con **Angular ** nativo y otros con Ionic/Angular el cual estos tienen cierto parecido en sus respuestas, consisten en retrasar el rendizado del
<swiper-container>usandosetTimeout()Esto representa para mi una mala practica o quizas para otros una solucion eficaz, una de las respuestas en el repositiorio de el equipo de Ionic se da a entender que si, existe un retraso en la forma que Swiper se monta y desmonta sus componentes con el uso de
<ion-router outlet>puesto que el mismo es una envoltura del<router-outlet>nativo de Angular....Otros usuarios reportan el hecho de que al momento de instanciar Swiper este no inicia de manera correcta debido a el retrazo ya mencionado y luego esta el caso que desde Angular al tener de referencia un type
ElementoHTMLElementtal cual lo dice la documentacion de Swiper no podremos acceder a el metodointialize()ya que este metodo viene de una clase que se encuenta en ficheroswiper/element/swiper-elements.js,si bien desde javascript vanilla se puede acceder a metodos o propiedades sin tipar (de manera dinamica).Steps to Reproduce
Al momento de tener la referencia desde un
@ViewChild()desde el dom, este nos dice que esa propiedad no existe y por ende recurrir a ignorar ciertas lineas usando//@ts-ignoreo convirtiendo la referencia enanythis.swiper?.nativeElement as any).initialize()sin mencionar que a el momento de importar el type
SwiperComponentdesde el fichero de tiposswiper-elements.d.tsnos da un tipado de HTMLElemnt cuando deberia tener tambien los tipos de de la claseswiper-elementque estan enswiper-element.js...Bueno quizas es mucho texto... pero si es algo incomodo ya que en discord y una que otra comunidad veo que siguen en la v8 del paquete y no ven luz con este cambio, pero quieren unirse a el progreso... mostrare a continuacion cual fue el metodo que me funciono para poder instaciar Swiper en mi proyecto ionic *v6 * con Angular v15.1.2
hora del codigo...
Utilizando los enfoques antes mencionados y conceptos usados, en mi humilde opinion creo que esta es la opcion mas mas sujeta a como estamos acostumbrados a usar con Angular
debido a el retraso a causa de montar y desmontar el componente
<swiper-component>vemos en consola que este se instacia en el ultimo gancho de vida de Ionic que esionViewDidEnter(), ya que este se dispara cuando todo el componente esta en cargado en pantalla.Quizas te estaras preguntando: ¿ que hacer en el caso de usar Angular sin Ionic ?
podriamos usar el live hook
ngAfterViewChecked()esperando el chequeo de angular para iniciar el componente... pero este solo se limita a retornarnully sin registrar nuestro Swiper.podriamos usar el evento
ngAfterViewInit()para porder registrar nuestro Swiper,la unica limitante es que este no tiene ningun tipo de retraso y parece ser de momento la unica opcion el usar la funcion
setTimeout()para poder instanciar Swiperlo gracioso es ver que nuestro componente sin el Swiper, pero si en consola XD.
solo faltaria inicializar el Swiper engañando a typeScript usando los "trucos" mencionados unos parrafos mas arriba
me parece mas atractivo el
//@ts-ignoreque usaranyya que para algunos les parecera mas natura el intepretar que hay algo raro ahi y es mejor ignorarlo.y ya eso es todo... solo queria extender este post con el tema sobre el
StyleInyectionen el registro del Swiper y ver que nos prepara el futuroBeta Was this translation helpful? Give feedback.
All reactions