I am using angular 12. I am just trying to do communication between child and parent components. The child component extends from base component which has @Input variable which will receive data from parent component. User enters data from parent component template html which is then passed to child component. Without base component, its working fine. But i wanted to use base component, so later base component can be given as super class to other classes which can come in future.

Please find stackblitz project: https://stackblitz.com/edit/angular-ivy-irq47l

Can someone please help in resolving this issue.

the error i am seeing is

Error in src/app/app.component.html (4:12)
Can't bind to 'data' since it isn't a known property of 'app-child'.
1. If 'app-child' is an Angular component and it has 'data' 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.

Below is snippet:

app.component.html

<input #newFruit type="text" placeholder="Enter a new fruit" />
<button (click)="addFruit(newFruit.value)">Add Fruit</button>

<app-child [data]="fruits"></app-child>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  fruits = ['Mengo', 'Orange', 'Banana'];

  constructor() {}

  addFruit(item: string) {
    this.fruits.push(item);
  }
}

child.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { BaseComponent } from '../base/base.component';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
})
export class ChildComponent extends BaseComponent implements OnInit {
  //@Input() data: string[] | undefined;

  ngOnInit(): void {}
  constructor() {
    super();
  }
}

child.component.html

<h1>Fruit List</h1>
<ul>
  <li *ngFor="let item of data">{{ item }}</li>
</ul>

base.component.ts

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

@Injectable()
export abstract class BaseComponent implements OnInit {
  @Input() data: string[] | undefined;
  constructor() {}

  ngOnInit(): void {}
}

package.json

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/forms": "^12.2.5",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "rxjs": "^7.3.0",
    "tslib": "^2.3.1",
    "zone.js": "^0.11.4"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.1",
    "@angular-devkit/build-angular": "~12.2.0",
    "@angular/cli": "~12.2.0",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  }
}

CodePudding user response：

You're missing the @component decorator in your base component declaration.

Your base.component.ts should be like this:

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

@Component({
  selector: 'app-base',
  template: ``
})
export abstract class BaseComponent implements OnInit {
  @Input() data: string[] | undefined;
  constructor() {}

  ngOnInit(): void {}
}

CodePudding user response：

For that you need to declare both the component in declarations array under app.module.ts file and also add schemas array because you are using custom element like <app-child></app-child> so here is example.

declarations: [ BaseComponent, ChildComponent ],      // declare both component
schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]   // add both

Here is Full Example

you can play or check Here