How to extend functionality of component?

Question

An interesting question arose.

There is a component that listens for a subject like:

export interface ToolPanel {
     title ?: string;
     buttons: Button [];
}

And then it just displays the buttons in the ngFor template.

Now you need to add the ability to display select list or textarea under the buttons?

How to properly extend the functionality of a component (template)?

Template is:

<div class="row" *ngFor="let tool of tools.toolPanels$">
     {{tool.title}}
     <!-- Here can be input, select or textarea -->
</div>

I think to extend the interface:

export interface ToolPanel {
     title ?: string;
     buttons: Button [];
     type: 'formField'
}

Then check in template:

<div class="row" *ngFor="let tool of tools.toolPanels$">
     {{tool.title}}
     <div *ngIf="tool.type === 'formField'">
       <app-formfield [type]="tool.type"></formfield>
     </div>
</div>

I think you should use Enum as a data type for the type in ToolPanel, this enum should contain all different types, and if type is mandatory then you can remove ngIf, — Mahmoud Nasr, Jun 05 '21 at 11:33
Okay, but how to display buttons and after input field if needs? — , Jun 05 '21 at 11:38
Another way you can create many classes which extend your interface, each class name represent a type — Mahmoud Nasr, Jun 05 '21 at 11:48

thecOdemOnkey · Accepted Answer · 2021-06-05T12:33:22.397

If i understood you right there are multiple ways to achive what you want but none of them are providing a full component extension because you can not extend templates and decorators in angular. Some people even say you should not use inheritance in angular, instead go with services for code reuse...

...but to reuse components functionallity you could put a <ng-content> tag inside your basecomponent and then manage the additonal content from the outside like:

BasePanelComponent

<div class="row" *ngFor="let tool of tools.toolPanels$">
     {{tool.title}}
     <ng-content>
</div>

Usage

<app-base-panel [tools]="tools">
     <!-- Here can be input, select or textarea -->
</app-base-panel>

Or you create multiple components that extend your base component and have their own template. Like:

BasePanelComponent

@Directive()
export class BasePanelDirective {

  @Input() config: ToolPanel;

  constructor() { }

}

InputFieldPanelComponent...

@Component({
             selector:    'app-input-field-panel',
             templateUrl: './input-field-panel.component.html',
             styleUrls:   ['./input-field-panel.component.scss'],
           })
export class InputFieldPanelComponent extends BasePanelDirective {

}

That way you have to copy the html code but can reuse the ts functions.

Or you do it like you did and use the *ngIf directive.

Conclusion:

If you have only a few places where this component should be used i would go with the <ng-content> approach. If you use the components a lot, i would go with an own template for each of them approach. If the changes are small enough you can use your *ngIf approach.

How to extend functionality of component?

1 Answers1