Angular: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘li’

  angular

Hi I am getting this error in Visual Code and angular 10:

Can’t bind to ‘ngClass’ since it isn’t a known property of ‘li’

in parts I will attach all of my code int his component, I don’t know to resolve it.

My html template is:

enter image description here

my component ts is:

import {
  Component,
  OnInit
} from '@angular/core';
import { Router } from '@angular/router';

import {
  CommunicationService
} from '../../share/communication/communication.service';

@Component({
  selector: 'app-menumovil',
  templateUrl: './menu-movil.component.html',
  styleUrls: ['./menu-movil.component.scss']
})
export class MenuMovilComponent implements OnInit {
  public esNosaltres = false;
  public esInicio = true;
  public esCarne = false;
  public esVerdura = false;
  public esFruta = false;
  public esProducto = false;

  constructor(
    private router: Router,
    private communication: CommunicationService,
  ) { }

  ngOnInit(): void {
  }

  public allMenuoff = () => {
    this.esNosaltres = false;
    this.esInicio = false;
    this.esCarne = false;
    this.esFruta = false;
    this.esVerdura = false;
    this.esProducto = false;
  }

  public eventOnClickMenu = (tipo: string) => {
    this.communication.setMenuType(tipo);

    this.allMenuoff();

    switch (tipo) {
      case 'inicio':
        this.esInicio = true;
        this.router.navigateByUrl('/');
        break;
      case 'nosaltres':
        this.esNosaltres = true;
        this.router.navigateByUrl('/nosotros');
        break;
      case 'producto':
        this.router.navigateByUrl('/');
        this.esProducto = true;
        break;
      case 'fruta':
        this.router.navigateByUrl('/');
        this.esFruta = true;
        break;
      case 'verdura':
        this.router.navigateByUrl('/');
        this.esVerdura = true;
        break;
      case 'carne':
        this.router.navigateByUrl('/');
        this.esCarne = true;
        break;
    }

  }
}

the module is:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import {
  FormsModule,
  ReactiveFormsModule
} from '@angular/forms';

import { MenuMovilComponent } from './menu-movil.component';

@NgModule({
  declarations: [MenuMovilComponent],
  exports: [MenuMovilComponent],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,

    NgModule
    ]
})
export class MenuMovilModule { }

in styles.scss I have:

.activoOn {
  background-color: black !important;

}

.activoOn a {
  color: silver !important;
}

.activoOff {
  background-color: unset !important;
}

If you need more information let me know

Why am I getting this error?

Thx

========================================================================
UPDATE 1:

@NgModule({
  declarations: [MenuComponent],
  exports: [ MenuComponent ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserModule, // <<------ not working with it...
    NgModule
  ]
})

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.