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

user_3451964 0
Viewed 6159

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
  ]
})

======================================================================== UPDATE 2:

In terminal I have this:

enter image description here

And in console: enter image description here

My app-routing is:

import { NgModule } from '@angular/core';
import {
  RouterModule,
  Routes
} from '@angular/router';

import { MenuMovilComponent } from './menumovil/menu-movil.component';
import { NosotrosComponent } from './nosotros/nosotros.component';
import {
  ViewsCarouselComponent
} from './views-carousel/views-carousel.component';

const routes: Routes = [


      { path: 'views', component: ViewsCarouselComponent },
      { path: 'nosotros', component: NosotrosComponent },
      { path: 'menu', component: MenuMovilComponent },
      { path: '', redirectTo: 'views', pathMatch: 'full' },
      { path: '**', redirectTo: '', pathMatch: 'full' },

];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I am importing it in app.module.

angular
2 Answers

Import BrowserModule in your NgModule:

import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  imports: [BrowserModule, ...]
...
})
user_34701480

If you already have the CommonModule/BrowserModule/FormsModule/NgModule and it's still not working then make sure you restart and then build your angular application. If it's still not working then you can recheck declarations[] and import[] arrays in app.module.ts file.

user_134406690
Related