error NG8002: Can't bind to 'dep' since it isn't a known property of 'app-add-edit-dep'

Issue

i am very new to Angular and trying to follow an anugular tutorial where he passes an object to app-add-edit-dep component on a modal in show-dep.component.html file but when i am trying to replicate the same locally i am getting this error. At first i thought its just i haven't initialized it properly in the ts file but i think its fine in that case. I have probably did something wrong in html file. Any suggestions where i am doing wrong ?

Here's my show-dep.component.html code

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right m-2" 
data-toggle="modal" data-target="#exampleModal"
(click)="addClick()"
data-backdrop="static" data-keyboard="false">
    Add Department
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"
          (click)="closeClick()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <app-add-edit-dep [dep]="dep" *ngIf="ActivateAddEditDepComp"></app-add-edit-dep>
        </div>
        
      </div>
    </div>
  </div>

<table class="table table-striped ">
    <thead>
        <tr>
            <th>DepartmentId</th>
            <th>DepartmentName</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let dataItem of Departmentlist">
            <td> {{dataItem.DepartmentId}}</td>
            <td> {{dataItem.DepartmentName}}</td>
            <td>
                <button type="button" class="btn btn-light btn-outline-primary mr-1" style="margin: 3px;">
                    Edit
                </button>
                <button type="button" class="btn btn-light btn-outline-primary mr-1" style="margin: 3px;">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>
</table>

here's my show-dep.component.ts code

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=[];

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

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

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

  refreshDeptList()
  {
    this.service.getDepList().subscribe(data=>{
      this.Departmentlist=data;

    });
  }
}

this is my add-edit-dep.component.ts file

import { Component, 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 {

  constructor() { }

  ngOnInit(): void {
  }

}

Solution

You have to import Input from angular core and declare @Input() dep:any;

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

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


export class AddEditDepComponent implements OnInit {

  constructor() { }

  @Input() dep:any;  //Add this

  ngOnInit(): void {
  }

}

Answered By - Sanjeev Jyothikrishnan