Inheritance

Angular components are TypeScript classes and participate in standard JavaScript inheritance semantics.

A component can extend any base class:

      
export class ListboxBase {
  value: string;
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
  // CustomListbox inherits the `value` property.
}
    

Extending other components and directives

When a component extends another component or a directive, it inherits all the metadata defined in the base class's decorator and the base class's decorated members. This includes the selector, template, styles, host bindings, inputs, outputs, lifecycle methods, and any other settings.

      
@Component({
  selector: 'base-listbox',
  template: `
    ...
  `,
  host: {
    '(keydown)': 'handleKey($event)',
  },
})
export class ListboxBase {
  @Input() value: string;
  handleKey(event: KeyboardEvent) {
    /* ... */
  }
}
@Component({
  selector: 'custom-listbox',
  template: `
    ...
  `,
  host: {
    '(click)': 'focusActiveOption()',
  },
})
export class CustomListbox extends ListboxBase {
  @Input() disabled = false;
  focusActiveOption() {
    /* ... */
  }
}
    

In the example above, CustomListbox inherits all the information associated with ListboxBase, overriding the selector and template with its own values. CustomListbox has two inputs (value and disabled) and two event listeners (keydown and click).

Child classes end up with the union of all of their ancestors' inputs, outputs, and host bindings and their own.

Forwarding injected dependencies

If a base class relies on dependency injection, the child class must explicitly pass these dependencies to super.

      
@Component({ ... })
export class ListboxBase {
  constructor(private element: ElementRef) { }
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
  constructor(element: ElementRef) {
    super(element);
  }
}
    

Overriding lifecycle methods

If a base class defines a lifecycle method, such as ngOnInit, a child class that also implements ngOnInit overrides the base class's implementation. If you want to preserve the base class's lifecycle method, explicitly call the method with super:

      
@Component({ ... })
export class ListboxBase {
  protected isInitialized = false;
  ngOnInit() {
    this.isInitialized = true;
  }
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
  override ngOnInit() {
    super.ngOnInit();
    /* ... */
  }
}