CODEWITHSUNDEEP
angulartypescript
Ahmer Ali Ahsan
Ahmer Ali Ahsan

Reputation: 6136

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

In my project I'm using lazy loading So, In my registration module I'm using [ngClass] directive to add invalid class when formGroup has some validation errors on my registration form. but my code throws an exception when trying to add [ngClass] directive on my form.

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

While investigating the error itself i came to several solutions, like adding the 'directive: [NgStyle]' to the component, but this does not solve the problem.

Here is my code:

register.router.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RegisterComponent } from "app/modules/register/register.component";


const routes: Routes = [
{
    path: '', pathMatch: 'full',
    component: RegisterComponent
}
];

@NgModule({
    imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule
],
declarations: [RegisterComponent],
    exports: [RouterModule]
})
export class RegisterRouter { }

register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterRouter } from './register.router';  


@NgModule({
    imports: [
      CommonModule,
      RegisterRouter
],
    declarations: []
})
export class RegisterModule { }

register.component.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

    @Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

//#region Declarations
    UserForm: FormGroup;
    inValid: boolean = false;
//#endregion

constructor(
    private _fb: FormBuilder) { 
    this.UserForm =  _fb.group({
    "_firstname" : ['', Validators.required]
    });
}
}

register.component.html

<input type="text" class="form-control" [ngClass]="{'ahinValid': inValid}" id="txtFirst_Name" aria-describedby="ariaFirstName" placeholder="Enter First Name"
          name="_firstname" [formControl]="UserForm.controls['_firstname']">

Thank you for your help.

Upvotes: 104

Views: 240360

Answers (16)

Isaac Barrera
Isaac Barrera

Reputation: 339

In my case, when using Angular 17 and 18, I encountered an issue where I couldn't use [ngClass], *ngIf, *ngFor, Forms, but this was resolved by adding the following line:

enter image description here

Taking into account that the app.module.ts was replaced by the app.config.ts (in a certain way)

Link: https://angular.io/guide/architecture-services

Upvotes: 19

kakaroto codes
kakaroto codes

Reputation: 79

I got the same problem when I deleted a component folder but didn't delete the import for it in the app.module.ts

It was just giving me this error in a total random place for some reason, if anyone else got it too, this may be a reason.

Upvotes: 1

Merdan Gochmuradov
Merdan Gochmuradov

Reputation: 147

For people having this error on a library project.

In my case, this was caused by the lack of a ng-packagr dev dependency.

Adding this package as a dev dependency (yarn add --dev ng-packagr) fixed the issue.

Upvotes: 0

Mike Gledhill
Mike Gledhill

Reputation: 29213

For me, this problem happened after upgrading to Angular 14.

Almost all of the lines in my app.module.ts file were underlined with red lines. And yes, I did already have this in my file:

  imports: [
    CommonModule,

Strangely, when I deleted a load of lines in the file, then hit CTRL+Z, most of the red lines went away, and I was just left with a red line on this line of code:

import { NgxDropzoneModule } from 'ngx-dropzone';

I removed this from my file, and everything built okay.

So, as others have said, it seems as though one tiny error in this app.module.ts file will give you hundreds of build errors elsewhere. The trick is to find the one faulty line.

By the way, after seeing that my code built okay with this change, I did attempt to re-add the "faulty" library to my app again, and afterwards, it did all work okay.

npm install --save ngx-dropzone

Upvotes: 0

Zia Khan
Zia Khan

Reputation: 435

check CommonModule imported and make sure spelling is correct i.e. [ngClass]="{'your_class':condition}"

Upvotes: 2

Arif Asadullah
Arif Asadullah

Reputation: 9

Instead of [ngClass] you can use

[class.my_class] = "step === 'step1'"

Upvotes: -2

Adavize Aliyu
Adavize Aliyu

Reputation: 287

I had this error because I uninstalled an external module and forgot to remove it from my imports array.

Apparently, if one import has an error it affects the whole module class.

So check for "red lines" in your module files if nothing else seems to work.

Upvotes: 7

Sotiris Zegiannis
Sotiris Zegiannis

Reputation: 465

In my case it didn't require the CommonModule import. I had just typed [ngclass] instead of [ngClass]. I guess its case sensitive and it needed the capital "C", instead of "c".

Upvotes: 3

James Ikubi
James Ikubi

Reputation: 2968

Other than the Common Module being included in the imports of the parent module (e.g. app.module) , also ensure that the component that is raising the issue is actually included in the declarations of the parent module.

Upvotes: 20

Christopher Krohn
Christopher Krohn

Reputation: 68

I had the same error.

Turns out it came after I moved a newly generated component from one folder to another. That move messed up the app.module.ts file.

I fixed the broken path, restarted ng serve, and voilà: Problem solved.

Hope this helps someone else, as I looked for solutions for hours and went through a complete npm re-install process, and more before stumbling on to this solution.

I blame my IDE for not informing me about the error in the app.module file, but ultimately this was caused by my own lazyness.

Upvotes: 3

Mehrshad Farzaneh
Mehrshad Farzaneh

Reputation: 694

Import your component into the declations of @ngModuls of anyName.module.ts file.

Upvotes: 8

Chiranshu Adik
Chiranshu Adik

Reputation: 51

Adding the Common module didn't work for me either. Adding my Component to its module's "declarations" worked perfectly.

Reference - https://www.javaer101.com/en/article/42275629.html

Upvotes: 4

Achraf Farouky
Achraf Farouky

Reputation: 1280

You need to import commonModule

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

Upvotes: 6

nawlbergs
nawlbergs

Reputation: 3010

For anyone who's still having these issue even after importing CommonModule

I had a library that I just could not get to compile. I had several modules.. which were importing other smaller/components:

One of the components in one of my smaller modules had [ngClass] in it.. it would cause lib to not compile and throw Can't bind to 'ngClass' since it isn't a known property of 'div'

Apparently... i was exporting all my components for that modules... but not the module itself in the public-api.ts file (the module that did the import of CommonModule):

export * from './lib/af-layout/af-layout.module'; // <==== THAT WAS MISSING
export * from './lib/af-layout/components/af-layout-header/af-layout-header.component';

It took me a long time to find that.. as the error was directing me towards CommonModule not being imported.. not that an export was missing.

Upvotes: 32

Ali Adravi
Ali Adravi

Reputation: 22833

Lazy Loading Share module issue common solution:

Both module must import CommonModule

In shared module:

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

Module where you want to use component:

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

Upvotes: 9

yurzui
yurzui

Reputation: 214345

Since RegisterComponent was declared in RegisterRouter(what's the name for module?) module then you have to import CommonModule there:

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    CommonModule      <================== this line
  ],
  declarations: [
    RegisterComponent // this component wants to have access to built-in directives
  ],
  exports: [RouterModule]
})
export class RegisterRouter { }

Upvotes: 154

Related Questions