Weird ngx-translate behavior when combined with swiper

0
votes

At my site I have swiper which is basically small library to make container divs swipeable. In those divs I have some text content which I translate with ngx-translate.

My swipeable divs are in loop. I have some weird issue that when I swipe all of them and I see first one again then translated text disapear. I tried to reproduce issue on stackblitz but I couldn't. Instead on stackblitz text is just not translated when I start swiping.

I think the reason of those two bugs is the same just in stacblitz I pull translations in other way - in project I import json file with http, on stackblitz I create translation programically.

To see the bug follow this steps:

  1. Open https://stackblitz.com/edit/angular-with-swiper-9kv25l?file=app%2Fapp.component.html

  2. Click button "change lang to polish"

  3. Start swiping blue divs.

What's going on here?

1
javascriptangularswiperngx-translate

1 Answers

1
votes

Your swiper create a copy of your original divs. Those copy is something like pure html and when you change language only original divs have changed text. Look in console. You will see that in app.component.html will be generated 3 divs but after swiper starts there will be more divs (nine?).

If you disable loop in swiper you'll see that all your divs have changed text properly.

UPDATE:

After changed language you can use this.swiper.destroy() and reinitialize it with same values. Then it will create copy divs with translated text. You propably also should use setTimeout due to small delay when angular change translations.

Your changed code: https://stackblitz.com/edit/angular-with-swiper-5bgbhv?file=app/app.component.ts

It's not so pretty but works.