Have you ever tried to bind a property or a directive to one of your components and get this error? Or any of its variations?

It can be that your directive isn’t a “known property” of the component you’re using, or maybe it’s that the component itself says it’s not “a known element”.

This is usually caused because Angular is not able to find the component or the property you’re trying to use, meaning that, it might be there somewhere, but it’s not available to the module you’re working on.

To solve this, we must go into the module we’re working on, and add that property or the module responsible for that property to our module’s imports.

For example, let’s say you’re working on a module called HomeModule, and that module has a component that looks a bit like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-party',
  template: '<input type="text" name="title">',
  styleUrls: ['./party.page.scss'],
})
export class HomeComponent {}

Right now, your component’s template has one input field, if you try to bind that field to a class property using ngModel, you can do something like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-party',
  template: '<input type="text" name="title" [(ngModel)]="pageTitle">',
  styleUrls: ['./party.page.scss'],
})
export class HomeComponent {
  pageTitle = 'Hello World';
}

The issue here is, if you try to run this code, you’ll get an error in the console saying something like this:

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

This means that our HomeComponent is trying to figure out what to do with the ngModel property, but it can’t find it, so it doesn’t know how to react.

When this happens, we need to let our component know where to get that ngModel from, for this, we’ll go to the component’s module, the one that is declaring this component, if we go there, it might look something like this:

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

import { HomeComponent } from './home.component';

@NgModule({
  imports: [CommonModule],
  declarations: [HomeComponent],
})
export class HomeModule {}

Now, we want to add the module that has that ngModel property to our imports array:

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

import { HomeComponent } from './home.component';

@NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [HomeComponent],
})
export class HomeModule {}

And that’s it, once you refresh the app you’ll see that the error is gone and that your component is now able to access the ngModel declaration.

It’s the same for when you try to add a component, for example, let’s say that out HomeComponent wants to use the CoolComponent we have in the CoolModule, if we try to use it directly like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-party',
  template: `<cool-component></cool-component>`,
  styleUrls: ['./party.page.scss'],
})
export class HomeComponent {}

We’ll get an error saying something like this:

'cool-component' is not a known element:

1. If 'cool-component' is an Angular component, then verify that it is part of this module.
2. If 'cool-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component

It’s similar than before, our HomeComponent wants to use our cool-component, but it doesn’t know where to find it, or how to use it. For that we need to go back to our HomeModule and add the CoolModule to our imports array:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoolModule } from '../path-to-my-cool-module';

import { HomeComponent } from './home.component';

@NgModule({
  imports: [CommonModule, CoolModule],
  declarations: [HomeComponent],
})
export class HomeModule {}

And that’s it, now the error should be gone.