CODEWITHSUNDEEP
angulartypescriptinheritanceannotationsangular-components
hoeni
hoeni

Reputation: 3280

How to annotate an extended component class in Angular? (Inheritance)

I have many child components Child1Component, etc., how do I write the annotations for the extended parent class ParentComponent?

/** Parent Component */
/** <----- How to annotate here? */
export class ParentComponent implements OnInit {
  constructor(i: INJECTED1, otherParam: string) {
    ...
  }
  ...
}

/** Child Component */
@Component({selector: ..., template: ..., styleUrls: ...})
export class Child1Component extends ParentComponent {
  constructor(i: INJECTED1, j: INJECTED2) {
    super(i, 'otherParam');
  }
  ...
}

What I've tried so far (with limited success):

Upvotes: 0

Views: 439

Answers (1)

Sherif Elmetainy
Sherif Elmetainy

Reputation: 4472

Yes, annotating with @Directive is the way to go (at least since angular 9 if I remember correctly, earlier versions of angular didn't need that).

You can rename the ParentComponent to ParentDirective and rename the file accordingly to make the linter happy, or you can configure the linter to ignore this case.

Edit: I prefer renaming ParentComponent to ParentDirective, because when you think about it a component is basically a directive (i.e. a selector that makes Angular treat certain html tags or html directive) but components have a template and styles while directives don't. Since you parent class doesn't have a template, it makes sense to name it directive.

Upvotes: 1

Related Questions