Iterating through

I'm trying to iterate through all of the <ng-template> generated HTML elements and adding event listeners to it and adding/removing classes, but as I'm iterating through the elements it's not letting me grab the actual element. Therefore, I can't grab stuff like classList or innerHTML

This is what the console throws: ERROR TypeError: item.classList is undefined

Here is my Template Code:

<div class="nav-container">
  <h2 class="fw-semibold text-center pt-3 logo">bytenotes</h2>
  <button class="newCat-btn">+ New Category</button>
  <nav #catItem class="navbar-container">
    <h3
      *ngFor="let category of categories; first as firstCat"
      class="catItem"
      [ngClass]="firstCat ? 'active' : ''"
    >
      
    </h3>
  </nav>
</div>

Here is my Component Code:

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css', '../../styles.css'],
})
export class NavComponent implements AfterViewInit, OnInit {
  @ViewChild('catItem') catItem!: ElementRef<HTMLHeadingElement>;
  categories: Array<string> = [];
  activeCategory: string = '';

  constructor(private db: DatabaseService, private auth: Auth) {}

  ngOnInit(): void {
    let currUser = this.auth.currentUser?.uid || '';
    //Populate categories Array
    this.db.getCategories(currUser).then((data: any) => {
      let catArray = data.val();

      catArray.forEach((category: any) => {
        this.categories.push(category);
      });

    });
  }
  //Setting active class
  ngAfterViewInit(): void {
    let navItems = this.catItem.nativeElement.childNodes;
    console.log(navItems);

    navItems.forEach((item: any) => {

      //Sets Active category
      if (item.classList.contains('active'))
        this.activeCategory = item.innerText;

      item.addEventListener('click', () => {
        navItems.forEach((item: any) => {
          item.classList.remove('active');
        });
        item.classList.add('active');
        this.activeCategory = item.innerText;
        console.log(this.activeCategory);

        //Horizontal Scrolling only for smaller screen sizes
        if (window.screen.width < 1440)
          item.scrollIntoView({ behavior: 'smooth', inline: 'center' });
      });
    });
  }


}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/eBUEjTK