I have some components like CricketComponent
, FootballComponent
, TennisComponent
etc. All These Classes have some common properties :- TeamName, teamSize, players
etc which are @Input()
.
Now I created a BaseComponent
class, defined all these properties in there and this baseComponent
class will be extended by cricket/football/tennis/etcComponents.
baseComponent.ts
export class BaseComponent {
@Input() TeamName: string;
@Input() teamSize: number;
@Input() players: any;
}
CricketComponent.ts
@Component({
selector: 'app-cricket',
templateUrl: './cricket.component.html',
styleUrls: ['./cricket.component.scss']
})
export class cricketComponent extends BaseComponent implements OnInit {
constructor() {
super();
}
ngOnInit(): void {
}
}
I am getting this error:
ERROR in src/app/base-screen.ts:4:14 - error NG2007:
Class is using Angular features but is not decorated. Please add an explicit Angular decorator.
You'll need to add a @Component
decorator to that base class (which should probably also be declared abstract
).
This is the bare minimum you can get away with in Angular 9:
import { Component } from '@angular/core';
@Component({
template: ''
})
export abstract class BaseComponent {
@Input() teamName: string;
@Input() teamSize: number;
@Input() players: any;
}
For Angular 10+, see this answer.