angular - unable to send data from parent component to child component showing child component is not known element - Stack Over

admin管理员组

文章数量:1122846

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 appponent.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/childponent';
import { AppComponent } from './appponent';

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

<h1>below code is from appponent.ts</h1>

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

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrl: './appponent.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 childponent.ts</h1>
import { Component, OnInit,Input,OnChanges} from '@angular/core';

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

  @Input() myCounter!:number;

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

}

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

}

• angular
• angularjs

Share Improve this question Follow asked Nov 23, 2024 at 4:36 DecoderDecoder 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You need to add AppComponent into the declarations array in the AppModule.

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

Demo @ StackBlitz

本文标签：