ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

splintercell9

So, I was working with a light and dark theme in angular project, through mat-slide-toggle I am switching theme with a service storing the theme isDark boolean as Behavioral Subject. I have two 2 modules that are lazy-loaded 1 for the home page and the other for the 404 error page as shown:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavModule } from '@shared/nav/nav.module' ;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NavModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

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

const routes: Routes = [
  {
    path: '', pathMatch: 'full', redirectTo: 'classify',
  },
  {
    path: 'classify', loadChildren: () => import('./feature/classify/classify-routing.module').then( m => m.ClassifyRoutingModule)
  },
  {
    path: '**', loadChildren: () => import('./feature/not-found/not-found-routing.module').then( m => m.NotFoundRoutingModule)
  }
];

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

classify.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClassifyRoutingModule } from './classify-routing.module';
import { ClassifyComponent } from './classify.component';


@NgModule({
  declarations: [ClassifyComponent],
  imports: [
    CommonModule,
    ClassifyRoutingModule
  ],
  exports: [ClassifyComponent]
})
export class ClassifyModule { }

classify.component.html

<div class="classify-container">
   <div class="pattern" [ngClass]="{ 'dark': isDark}">
   </div>
</div>

classify.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AppSettingsService } from '@core/service/app-settings.service';
import { SubSink } from 'subsink';

@Component({
  selector: 'app-classify',
  templateUrl: './classify.component.html',
  styleUrls: ['./classify.component.scss']
})
export class ClassifyComponent implements OnInit, OnDestroy {
  isDark = false ;
  subs = new SubSink() ;

  constructor(private conf: AppSettingsService){
    this.subs.sink = this.conf.darkMode.subscribe( value => {
      this.isDark = value ;
    }) ;
  }

  ngOnInit(): void {
  }

  ngOnDestroy(): void{
    this.subs.unsubscribe() ;
  }
}

app-setting.service.ts

import { Injectable } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AppSettingsService {
  mobile = false ;
  darkMode: BehaviorSubject<boolean> ;
  theme: string | null;
  constructor(private detector: DeviceDetectorService) {
    this.mobile = this.detector.isMobile() ;
    this.theme = localStorage.getItem('theme') ;
    if (!this.theme){
      this.theme = 'light' ;
      localStorage.setItem('theme', this.theme) ;
    }

    if (this.theme == 'light'){
      this.darkMode = new BehaviorSubject<boolean>(false) ;
    }
    else{
      this.darkMode = new BehaviorSubject<boolean>(true) ;
    }
  }

  private changeTheme(theme: string){
    this.theme = theme ;
    localStorage.setItem('theme', theme) ;
  }

  toggleDarkMode(): void{
    if (this.theme == 'light'){
      this.darkMode.next(true) ;
      this.changeTheme('dark') ;
    }
    else{
      this.darkMode.next(false) ;
      this.changeTheme('light') ;
    }
  }
}

Now in my scss file for light theme div.pattern has a background image and if I toggle theme then the dark class containing another background image must change the div background but on compiling the angular app. It's giving me an error that ngClass is not a known property. Please help with this issue as I have both browse Module and common module imported in their respective locations.

package.json

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.3",
    "@angular/cdk": "^11.0.2",
    "@angular/common": "~11.0.3",
    "@angular/compiler": "~11.0.3",
    "@angular/core": "~11.0.3",
    "@angular/forms": "~11.0.3",
    "@angular/material": "^11.0.2",
    "@angular/platform-browser": "~11.0.3",
    "@angular/platform-browser-dynamic": "~11.0.3",
    "@angular/router": "~11.0.3",
    "ngx-device-detector": "^2.0.4",
    "rxjs": "~6.6.0",
    "subsink": "^1.0.2",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.3",
    "@angular/cli": "~11.0.3",
    "@angular/compiler-cli": "~11.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

screenshot:

screenshot of terminal

app.component.html

<div class="container mat-app-background" [ngClass]="{ 'dark-theme': isDarkTheme }">
   <app-nav></app-nav>
   <div class="load-overlay" *ngIf="isLoading">
      <div class="loader"></div>
   </div>

   <router-outlet></router-outlet>
</div>

Update 1: Added app-setting service, package.json, screenshot (variable name was changed here)

Update 2: Also want to share that App.component.html has the same ngClass for toggling the dark theme but it's working perfectly

splintercell9

So, I was revisiting my code(nearly wasted 4hours to find cause of issue) and apparently adding ClassifyComponent to App.module's declarations array (other code remained same) removed the error and was working perfectly. Can anyone explain why is this happening ?

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.

Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Can't bind to 'ngIf' since it isn't a known property of 'div'

Can't bind to 'target' since it isn't a known property of 'div'

Angular 2 Can't bind to 'dragula' since it isn't a known property of 'div'

Angular2 unit testing error: Can't bind to 'routerLink' since it isn't a known property of 'a'

Angular4 Exception: Can't bind to 'ngClass' since it isn't a known property of 'input'

Can't bind to 'leafletOptions' since it isn't a known property of 'div'

Angular error : Can't bind to 'ngForFrom' since it isn't a known property of 'a'

Angular 6 production build "Can't bind to 'disabled' since it isn't a known property of 'div'"

Can't bind to 'leafletMarkerCluster' since it isn't a known property of 'div'

Angular Test error -- Can't bind to 'items' since it isn't a known property of 'app-dropdown'

Angular: ternary operator in ngFor throw error Can't bind to 'ngFor' since it isn't a known property of 'div'

Can't bind to 'formControl' since it isn't a known property of 'div' - Angular 2

Error: Can't bind to 'ngModel' since it isn't a known property of

Can't bind to 'startingCategory' since it isn't a known property of 'div'

Can't bind to property since it isn't a known property of a component

error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. In Angular 9

Can't bind to 'cdkDragFreeDragPosition' since it isn't a known property of 'div'

angular 11 Can't bind to 'allow' since it isn't a known property of 'iframe'

Angular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'

Angular Can't bind to 'dirUnless' since it isn't a known property

Angular 5 Error:Can't bind to 'ngForFor' since it isn't a known property of 'li'

Error: Can't bind to 'ngForOf' since it isn't a known property of 'div'

Angular error message: Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular unit test error - Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular 7 compilation error NG8002 can't bind object since it isn't a known property

Angular 11 - Can't bind to boundary since it isn't a known property of div

Angular: call of componenr error : can't bind to xxx since it isn't a known property of yyy