How to extend HTML elements with Angular 7

Question

I try to create custom button in Angular 7. This button should support all attributes, which already have standard HTML button, like autofocus, disabled and etc. So I try to extend HTMLButtonElement in my component like this:

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

@Component({
  selector: 'my-button',
  template: '<ng-content></ng-content>'
})
export class ButtonComponent extends HTMLButtonElement {
}

But I get error message Error: Failed to construct 'HTMLButtonElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Is some way to extend HTML element in Angular component without using directive?

Demo

Answer 1

Angular components are not able to extend native elements. There is an open issue on the Angular repo regarding this topic. Today you need to have your Angular component wrap the native HTML element, i.e you need to add the native element in your component template.