Шаблон углового использования базового компонента

Question

Я создал базовый компонент для компонентов элемента формы, который выглядит следующим образом:

@Component({
  selector: 'app-base-form-element',
  templateUrl: './base-form-element.component.html'
})
export class BaseFormElementComponent {
  @Input() parentForm: FormBuilder
  @Input() error: string
  @Input() fcname: string
  @Input() label: string
...
}

и затем дочерние компоненты запускаются с ключевым словом extends для наследования свойств.

Однако я хотел бы также наследовать HTML-шаблон, так как все дочерние компоненты имеют похожую структуру, которая выглядит следующим образом:

<div class="form-group" [formGroup]="parentForm">
  <label class="form-control-label" for="{{ id }}">{{ label }}</label>
  // here should be child-specific content 
  <span class="invalid-feedback" *ngIf="error">
    {{ error }}
  </span>
</div>

Как я могу реализовать что-то подобное?

Answer 1

Вот блик к возможному решению. https://stackblitz.com/edit/angular-evrvhe?file=src%2Fapp%2Fbase%2Fbase.component.html