`I did this in the Angular html file:

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

}

CodePudding user response：

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.

CodePudding user response：

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

}

CodePudding user response：

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

Input documentation.