CODEWITHSUNDEEP
angularinheritance
Dandy
Dandy

Reputation: 969

Angular use template of a base component

I've created a base component for my form element components, which looks like that:

@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
...
}

and then children-components are initiated with the extends keyword to inherit the properties.

However, I would like to inherit also an html template, as all children-components have similar structure, which looks like this:

<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>

How can I implement something like that?

Upvotes: 2

Views: 3921

Answers (1)

Bogdan B
Bogdan B

Reputation: 934

Here's a stackblitz to a possible solution. https://stackblitz.com/edit/angular-evrvhe?file=src%2Fapp%2Fbase%2Fbase.component.html

Upvotes: 2

Related Questions