Page not responding on dynamic data load

[taychris]

Hello people,

I am using GlideJS in my angular app. Everything works well while I am using hard coded data for the slider, but once I use the *ngFor for loop, for the dynamic data, the page wont even load and I get a notification from chrome, that the page is not responding.

What is the issue here?

This does not work:

<div class="glide">
      <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides carousel-container">
          <li *ngFor="let project of projects" class="glide__slide">
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="{{ project.url }}"
            >
              <img src="{{ project.img }}" alt="" />
              <h3>{{ project.title }}</h3>
              <p>
                {{ project.tech }}
              </p>
            </a>
          </li>
        </ul>
      </div>
     ....

And this does work:

<div class="glide">
    <div data-glide-el="track" class="glide__track">
      <ul class="glide__slides carousel-container">
        <li class="glide__slide">1</li>
        <li class="glide__slide">2</li>
        <li class="glide__slide">3</li>
      </ul>
    </div>
    ....

[mustafakapur]

I have same problem here . If you have found any solution please let me know. I have stuck here.

[taychris]

Since I haven't received any support on this issue, nor have I found anything about this issue anywhere else, I have switched to SwiperJS.

[mustafakapur]

Okay. Does SwiperJs works proper in Angular 8 or 9

[bartuaf]

anything here? I have the same problem :)