Swiper Dangerous not working correctly with ngFor about cretio-angular-foundation HOT 15 OPEN

@Vibrat

adding:

 observer: true,
 observeParents: true,

to the config object resolved the issue for me.

Also using ngOnInit is enough no need for ngAfterViewInit.

from cretio-angular-foundation.

Fixed by implements AfterViewInit and setTimeout. Jss

in app/main-content/main-content.component.ts

import { AfterViewInit, Component, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';
import 'swiper';

import { News, Test, Api, SwiperContainer } from './data/news';

@Component({
  selector: 'app-main-content',
  templateUrl: './main-content.component.html',
  styleUrls: ['./main-content.component.css'],
})

export class MainContentComponent implements OnInit, AfterViewInit {
  private api = Api;
  public allNews: News[];
  public data: Test;
  public swiperContainers = SwiperContainer;

  constructor(
      private http: HttpClient,
      private apiService: ApiService
  ) { }

  showData() {
        this.apiService.getData(this.api.projectApi)
            .subscribe((data: Test) => this.data = data);
        this.apiService.getData(this.api.postApi)
          .subscribe((data: News[]) => this.allNews = data);
  }


  ngAfterViewInit () {
      setTimeout (function () {
          const swiperNews = new Swiper('.' + SwiperContainer.newsContainer);
      }, 0);
      setTimeout(function () {
         const swiperPort = new Swiper('.' + SwiperContainer.portfolio, {
             slidesPerView: 1
         });
      });
  }

  ngOnInit() {
      this.showData();

      interface HTMLInputEvent extends Event {
          target: HTMLInputElement & EventTarget;
      }

      const swiper = new Swiper('.' + SwiperContainer.mainContainer, {
          simulateTouch: false,
      });

      const spans = Array.from(document.querySelectorAll('.word span'));
      spans.forEach((span, idx) => {
          span.addEventListener('click', (e) => {
              (<HTMLInputEvent>e).target.classList.add('active');
          });
          span.addEventListener('animationend', (e) => {
              (<HTMLInputEvent>e).target.classList.remove('active');
          });

          // Initial animation
          setTimeout(() => {
              span.classList.add('active');
          }, 750 * (idx + 1));
      });

      let titles = Array.from(document.querySelectorAll('.container .title'));

      const containers = Array.from(document.querySelectorAll('.swiper-wrapper .swiper-slide .container'));

      let calulator = 1;

      containers.forEach((container, inx_co) => {
          titles = Array.from(container.querySelectorAll('.title'));
          titles.forEach((title, index) => {
              Array.from(title.querySelectorAll('span')).forEach((item , inx) => {
                  item.style.animationDelay = 4 * calulator + 's';
              });
              ++calulator;
          });

          setTimeout(function () {
              swiper.slideNext();
          }, calulator * 4000);
      });
  }


}

from cretio-angular-foundation.

I think you should try to use another library.
Ex: https://owlcarousel2.github.io/OwlCarousel2/

from cretio-angular-foundation.

Not really sure about Angular, but in React we have lifecycle hooks (for example componentDidMount). I would imagine Angular also has something similar.

https://angular.io/guide/lifecycle-hooks
^ ngAfterViewInit() maybe?

from cretio-angular-foundation.

ngAfterViewChecked() - Called after the ngAfterViewInit. Maybe this one. This use case is trivial, I believe you can find good document around.

from cretio-angular-foundation.

@harrisnguyen94 @dohoanghuy94 @nguyenhoangtu

Jquery and Swiper.js bind DOM elements which need to be executed afterwards. Is there anyway to force Js library (Jquery, Swiper.js) to run after Angular rendering DOM Elements?

from cretio-angular-foundation.

@harrisnguyen94

Yes, it's much of the answer. It seems like *ngFor triggers at the end of ngAfterViewInit() so we're finding a way to force Jquery and Swiper.js bind DOM elements at the very end of the ngAfterViewInit().

from cretio-angular-foundation.

@harrisnguyen94

I've just tried it. ngAfterViewChecked() call every time DOM changes which trigger many times => Jquery & Swiper load multiple times.

from cretio-angular-foundation.

There's a catch. ngAfterViewInit is called only once, ngAfterViewChecked is called everytime content change. That means Swiper or whatever library initializing you put in will be called every single time, which might be both a good and bad thing. It's good if you want to select new dom nodes created by content changes. It's bad if you change content constantly.
Are you working on a carousel or something like that? Try hiding the node, instead of removing it completely from the dom (by changing data). That way you only need to select it once using ngAfterViewInit.

from cretio-angular-foundation.

Without diving deeper into the code or learn more about Angular there's not much more I can help. However, as I said earlier, the unidirectional data flow of Angular or React or Vue does not play well with the way Jquery work, so if you find yourself hitting the wall too often, it might be better to find an alternative that is written specifically for Angular.

from cretio-angular-foundation.

I'll dig deeper into Angular 6 and let you know when i figure a way out.

Thanks for your help @harrisnguyen94

from cretio-angular-foundation.

Fixed by implements AfterViewInit and setTimeout. Jss

in app/main-content/main-content.component.ts

import { AfterViewInit, Component, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';
import 'swiper';

import { News, Test, Api, SwiperContainer } from './data/news';

@Component({
  selector: 'app-main-content',
  templateUrl: './main-content.component.html',
  styleUrls: ['./main-content.component.css'],
})

export class MainContentComponent implements OnInit, AfterViewInit {
  private api = Api;
  public allNews: News[];
  public data: Test;
  public swiperContainers = SwiperContainer;

  constructor(
      private http: HttpClient,
      private apiService: ApiService
  ) { }

  showData() {
        this.apiService.getData(this.api.projectApi)
            .subscribe((data: Test) => this.data = data);
        this.apiService.getData(this.api.postApi)
          .subscribe((data: News[]) => this.allNews = data);
  }


  ngAfterViewInit () {
      setTimeout (function () {
          const swiperNews = new Swiper('.' + SwiperContainer.newsContainer);
      }, 0);
      setTimeout(function () {
         const swiperPort = new Swiper('.' + SwiperContainer.portfolio, {
             slidesPerView: 1
         });
      });
  }

  ngOnInit() {
      this.showData();

      interface HTMLInputEvent extends Event {
          target: HTMLInputElement & EventTarget;
      }

      const swiper = new Swiper('.' + SwiperContainer.mainContainer, {
          simulateTouch: false,
      });

      const spans = Array.from(document.querySelectorAll('.word span'));
      spans.forEach((span, idx) => {
          span.addEventListener('click', (e) => {
              (<HTMLInputEvent>e).target.classList.add('active');
          });
          span.addEventListener('animationend', (e) => {
              (<HTMLInputEvent>e).target.classList.remove('active');
          });

          // Initial animation
          setTimeout(() => {
              span.classList.add('active');
          }, 750 * (idx + 1));
      });

      let titles = Array.from(document.querySelectorAll('.container .title'));

      const containers = Array.from(document.querySelectorAll('.swiper-wrapper .swiper-slide .container'));

      let calulator = 1;

      containers.forEach((container, inx_co) => {
          titles = Array.from(container.querySelectorAll('.title'));
          titles.forEach((title, index) => {
              Array.from(title.querySelectorAll('span')).forEach((item , inx) => {
                  item.style.animationDelay = 4 * calulator + 's';
              });
              ++calulator;
          });

          setTimeout(function () {
              swiper.slideNext();
          }, calulator * 4000);
      });
  }


}

Thank you bro!

from cretio-angular-foundation.

bserver: true,
observeParents: true,

where did you use those parameters?

from cretio-angular-foundation.

bserver: true,
observeParents: true,

where did you use those parameters?

add this params to config

from cretio-angular-foundation.

I'm using Swiper on Ionic - Angular.
I can make it work on this way: Hope help somebody else!.

--------- HTML

      <swiper-container [pagination]="true" [slides-per-view]="1" [class.someCssClass]="someBoolVariable">
        <swiper-slide *ngFor="let item of items;">{{item}}</swiper-slide>
      </swiper-container>

--------- CSS

  .someCssClass {
    // When add this css rule (after swiper load slide) DOM is refresh, and work!!
    --swiper-pagination-color: #fff;
  }

---------- TS

        this.items = someServiceToGetSlides();
        // After fill slide array: 
        setTimeout(() => { this.someBoolVariable = true; }, 2000);

from cretio-angular-foundation.