Angular: Can't bind to 'visible' since it isn't a known property of 'Not Found Component'

Question

I am trying to implement not found functionality to my Angular Frontend Project. It works on several components but it does not work in Event Page Component.

Here is the code from Not Found Component.

<div *ngIf="visible">
{{notFoundMessage}}
<a routerLink="{{resetLinkRoute}}">{{resetLinkText}}</a>

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

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

  @Input() visible: boolean = false;
  @Input() notFoundMessage: string = "Nothing Found!";
  @Input() resetLinkText: string = "Reset";
  @Input() resetLinkRoute: string = "/";

  constructor() { }

  ngOnInit(): void {
  }

}

When I try to bind it to Event Page Component like this:

<app-not-found 
[visible]="!event"
notFoundMessage="Event Not Found"
resetLinkText="Go To Homepage">
</app-not-found>

<div *ngIf="event" class="container"> ...  </div>

I am given this type of error:

Here is the app.module.ts

Can You help me with resolving this issue?