Uncaught TypeError: can't access property "classList", e is null

Question

I want to show Youtube Videos in a bootstrap carousel with Angular. It is showing the Slides and the Videos but when the Slide is moving i got this error: Uncaught TypeError: can't access property "classList", e is null

My html:

    <div id="home-carousel" class="container p-0">
      <div id="carouselDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button
            *ngFor="let movie of sortedMovies; let i = index"
            type="button"
            data-bs-target="#carouselDark"
            data-bs-slide-to="i"
            [ngClass]="{active:i}"
            aria-current="true"
            aria-label="Slide 1"
            [attr.data-slide-to]="i">
          </button>
        </div>
        <div class="carousel-inner">
          <div *ngFor="let movie of sortedMovies; let i = index" class="carousel-item" data-bs-interval="2000" [ngClass]="{'active': i}">
            <iframe [src]='getSafeURL(movie.youtube)' height="500" class="d-block w-100" alt="..."></iframe>
            <div class="carousel-caption d-none d-md-block">
              <h2 class="text-white film-title">{{movie.title}}</h2>
              <a [routerLink]="'/movie/' + movie.id">Zum Film</a>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselDark" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselDark" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

and my ts:

 import { Component, OnInit } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    import { environment } from 'src/environments/environment';
    import { Movie } from '../../models/movie.model';
    import { PublicService } from '../../services/public.service';
    
    @Component({
      selector: 'app-slider',
      templateUrl: './slider.component.html',
      styleUrls: ['./slider.component.css']
    })
    export class SliderComponent implements OnInit {
      movies: Movie[] = [];
      sortedMovies: Movie[]=[];
      currentIndex: number = 1;
      BACKEND_URL = environment.apiUrl
      constructor(private publicService: PublicService, private sanitizer: DomSanitizer) { }
    
  ngOnInit(): void {
    this.publicService.getAllPublicMovies().subscribe((data) => {
      this.movies = data;
      this.sortedMovies = this.sortMovies(data)
      console.log(this.sortedMovies)
    });

  }

  getSafeURL(youtubeLink: string){
    let youtubeId = this.getYoutubeId(youtubeLink);
    let returnURL = 'https://www.youtube.com/embed/'+youtubeId;
    let safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(returnURL);
    return safeURL;
  }

  getYoutubeId(youtubeLink: string) {
    let regex = new RegExp(/(?:\?v=)([^&]+)(?:\&)*/);
    let matches = regex.exec(youtubeLink);
    let youtubeId = matches![1];
    return youtubeId;
  }

  sortMovies(movies: Movie[]){
    let sortedMovies: Movie[];
    sortedMovies = movies.sort((a,b) => (a.cinemaRelease > b.cinemaRelease ? 1 : -1));
    return sortedMovies;
  }
}

What am i missing. Once the slides moved and the error occurs, the slider is not working anymore.

Answer 1

You need know about interpolation. There're several errors in your html code. I imagine that should be:

[attr.data-bs-slide-to]="i" //<--if you want that the data-bs-slide-to change

[ngClass]="{'active':currentIndex==i}" //<--if you want 
                  //the class 'active' when currentIndex==i