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

Question

`I did this in the Angular html file:

    <div class="modal-body">
     <app-add-edit-dep [dep]="dep" *ngIf="ActivateAddEditDepComp">
     </app-add-edit-dep>
    </div>

Now the error is: Error: src/app/department/show-dep/show-dep.component.html:23:31 - error NG8002: Can't bind to 'dep' since it isn't a known property of 'app-add-edit-dep'.

1. If 'app-add-edit-dep' is an Angular component and it has 'dep' input, then verify that it is part of this module. your text
2. If 'app-add-edit-dep' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.'

This is the Angular TS file:

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-show-dep',
  templateUrl: './show-dep.component.html',
  styleUrls: ['./show-dep.component.css']
})
export class ShowDepComponent implements OnInit {

  constructor(private service:SharedService) { }

  DepartmentList:any=[];

  ActivateAddEditDepComp:boolean=false;
  dep:any;
  ModalTitle:string;

  ngOnInit(): void {
    this.refreshDepList();
  }

  addClick(){
    this.dep={
      DepartmentId:0,
      DepartmentName:""
    }
    this.ModalTitle="Add Department";
    this.ActivateAddEditDepComp=true;
  }

  closeClick(){
    this.ActivateAddEditDepComp=false;
    this.refreshDepList();
  }


  refreshDepList(){
    this.service.getDepList().subscribe(data=>{
      this.DepartmentList=data;
    });
  }

}

Answer 1

You're missing a property "dep" in add-edit-dep component with the decorator @Input()

Input documentation.

Answer 2

The error given to you by Angular outlines the most likely causes. It could be that you aren't importing the AddEditDepComponent (or similarly named) into the module where you are declaring ShowDepComponent. As per the message, it could also be that the dep input is not declared - either because you've missed the Input() decorator, or because it just doesn't exist as a proper on that class at all.

Answer 3

You need be sure that your app-add-edit-dep is declared in app.module.ts (or another needed *.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ShowDepComponent } from './show-dep/show-dep.component';
import { AddEditDepComponent } from './add-edit-dep/add-edit-dep.component';


@NgModule({
  declarations: [
    AppComponent,
    ShowDepComponent,
    AddEditDepComponent,

  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The second reason, can be that "dep" property of app-add-edit-dep doesnt have @Input() anatation, like

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

@Component({
  selector: 'app-add-edit-dep',
  templateUrl: './add-edit-dep.component.html',
  styleUrls: ['./add-edit-dep.component.css']
})
export class AddEditDepComponent implements OnInit {

  @Input()
  dep: any;

  constructor() { }

  ngOnInit(): void {
  }

}

Answer 4

I'm doing the same tutorial. You just have to declare in the add-edit-dep.components.ts

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

@Component({
  selector: 'app-add-edit-dep',
  templateUrl: './add-edit-dep.component.html',
  styleUrls: ['./add-edit-dep.component.css']
})
export class AddEditDepComponent {

 @Input() dep:any;   <------ THIS WOULD ENABLE TO RUN THE APP

}