[SOLVED] Angular 10 error NG8002 can't bind object

I'm getting the following error whenever I add the following line of code to an .html file:

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

If 'app-add-edit-dep' is an Angular component and it has 'dep' input, then verify that it is part of this module.

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.

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

22 [dep]="dep" *ngIf="ActivateAddEditDepComp"> ~~~~~~~~~~~

src/app/department/show-dep/show-dep.component.ts:6:16 6 templateUrl: './show-dep.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component ShowDepComponent.

<app-add-edit-dep
   [dep]="dep" *ngIf="ActivateAddEditDepComp">
</app-add-edit-dep>

Everything is fine up until I add this line. I'm passing a department object to my add-edit-department component so that it knows whether it needs to add a new department or edit an existing department. I've included everything I worked on involving the department object in question.

show-dep.component.html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary float-right m-2" 
data-bs-toggle="modal" data-bs-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">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
        <button type="button" class="btn-close" 
        data-bs-dismiss="modal" aria-label="Close"
        (click)="closeClick()" >
        </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>Department Name</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 mr-1">
                    Edit
                </button>
                <button type="button" class = "btn btn-light mr-1">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>

</table>

show-dep.component.ts

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 | undefined;
  ActivateAddEditDepComp:boolean = false;
  dep:any;

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

}

add-edit-dep.component.ts

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

}

Edit: I have added app.module.ts below.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DepartmentComponent } from './department/department.component';
import { ShowDepComponent } from './department/show-dep/show-dep.component';
import { AddEditDepComponent } from './department/add-edit-dep/add-edit-dep.component';
import { EmployeeComponent } from './employee/employee.component';
import { ShowEmpComponent } from './employee/show-emp/show-emp.component';
import { AddEditEmpComponent } from './employee/add-edit-emp/add-edit-emp.component';
import { SharedService } from './shared.service';

import {HttpClientModule} from '@angular/common/http';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    DepartmentComponent,
    ShowDepComponent,
    AddEditDepComponent,
    EmployeeComponent,
    ShowEmpComponent,
    AddEditEmpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }