unable to send data from parent component to child component showing child component is not...

i am trying to send data from one component to another using selector of another component but unable to send that data showing below error

NG8002: Can't bind to 'myCounter' since it isn't a known property of 'app-child'.

1. If 'app-child' is an Angular component and it has 'myCounter' input, then verify that it is part of this module.
2. If 'app-child' 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.

<h1>below code is from app.component.html</h1>

<div style="text-align:center">
<h1>
My App
</h1>

<div>
<button (click)="increment()">Addition</button>
<button (click)="decrement()">Substract</button>
<app-child [myCounter]="counter"></app-child>
</div>
</div>

<h1>below code is from app.module.ts</h1>
import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { ChildComponent } from './component/child/child.component';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
ChildComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
provideClientHydration()
],
bootstrap:[
AppComponent
]
})
export class AppModule { }

<h1>below code is from app.component.ts</h1>

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'PracticeThiryOctober';
number:number=234232;

get counter()
{
return this.number;
}

set counter(value)
{
this.number=value;
}

increment()
{
this.counter++;
}

decrement()
{
this.counter--;
}

}

<h1>below code is from child.component.ts</h1>
import { Component, OnInit,Input,OnChanges} from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrl: './child.component.css'
})
export class ChildComponent implements OnChanges {

@Input() myCounter!:number;

ngOnChanges()
{
console.log('ngOnChanges')
}

}

Continue reading...