CODEWITHSUNDEEP
angulartypescriptdata-bindingtwo-way-binding
sarangish
sarangish

Reputation: 1

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

`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;
    });
  }

}

Upvotes: 0

Views: 15332

Answers (4)

CrimsonHerb
CrimsonHerb

Reputation: 1

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

}

Upvotes: 0

Nikita
Nikita

Reputation: 812

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 {
  }

}

Upvotes: 1

Richard
Richard

Reputation: 644

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.

Upvotes: 2

origeva
origeva

Reputation: 191

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

Input documentation.

Upvotes: 1

Related Questions