angularinheritancecomponents

Angular component inheritance: will @Component decorator metadata inherited?

I have a parent-component like this:

@Component({
  template: "",
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ImYourFather {}

Now I also have two inheritance components like this:

@Component({
   template: "I'm Luke",
})
export class Luke extends ImYourFather {}

@Component({
   template: "I'm Leia",
})
export class Leia extends ImYourFather {}

What is the changeDetectionStrategy for Luka & Leia?

Will @Component decorator metadata inherited?

Please provide some source to verify the statement! I haven't found anything yet. Thanks.

Solution

  • After seeing different answers, I just tried it out myself.

    Result:

    The ChangeDetectionStrategy (e. g. "OnPush") is not inheritated by class-inheritance via extend. Although it is inherited by its DOM-parent.

    Example

    Compare right-comment of this Luke:

    <!-- Luke extends ImYourFather / ImYourFather CDS="OnPush" / Luke CDS=<no set> -->
<app-luke></app-luke> <!-- CDS="Default" -->

    .. with right-comment of that Luke:

    <!-- Deathstar CDS="OnPush" -->
<app-deathstar>
   <!-- Luke extends ImYourFather | ImYourFather CDS="OnPush" | Luke CDS=<no set> -->
   <app-luke></app-luke> <!-- CDS="OnPush" -->
</app-deathstar>

    ➡ Same Luke, different ChangeDetectionStrategies.

    Stackblitz Demo