Angular component inheritance

Question

I have some components that are looking similar, serving same purpose, having same styles, however they have to implement slightly different behavior depending on module that they are used in. Now these are different components, however I'm not sure whether I'm doing right by copying and pasting one component multiple times and making small changes to achieve small changes in its behavior and layout.

If it was simple TypeScript I would just extend the base class and make whatever I need, however sometimes I need to make small changes to html layout either.

Is there a way where I could generalize my component (e.g. table component) and make it able to implement different behavior based on my needs?

Enea Dume · Accepted Answer · 2019-02-08 08:43:30Z

Open app-routing.module.ts and let's suppose that we have these:

// ...component imports

const routes: Routes = [
  { path: '', component: PageoneComponent },
  { path: 'pageone', component: PageoneComponent },
  { path: 'pagetwo', component: PagetwoComponent },
  { path: 'pagethree', component: PagethreeComponent }
];

Open each of the page components and extend it using the BaseComponent:

export class PageoneComponent 
  extends BaseComponent
  implements OnInit {
    // ...
}

As well as adding the router and injecting it into the BaseComponent constructor using super:

constructor(public router: Router) {
  super(router);
}

This will take the injected router module and pass it into the extended component.

Due to the inheritance passed from the base component, anything defined on the base component is available to all components which extend it.

See the full article of component-inheritance

Qortex · Accepted Answer · 2019-02-08 08:49:33Z

Yes, but there is no general recipe. You have to design the components yourself maximizing the genericity of the components to allow for fruitful imbrication of the components.

The building blocks you can use are:

Input / Output attributes of course. Think of all the ways data & configuration for your component can be passed through arguments instead of hard-coded.
<ng-content>: you can allow for content injection. This way, you don't have to rewrite components when subtle changes are made. Use that in conjunction with ng-content select to be able to customize only some parts of the display. More details here for example.
Use ngIf*, ngSwitch*, ng-container, ng-template and such. It allows to display different HTML code based on component configuration variables. This way, you can often have just a single component for different final uses. (For example: one ControlComponent that can be either a checkbox, a textfield, and so on).

With all these tools, you can have some fun thinking about the best way to reuse code. You should aim for no code replication (aim for DRY).

Kuldeep Bhimte · Accepted Answer · 2019-02-08 08:47:06Z

0

You can have a common reusable component e.g TableComponent.

And you can inherit the component wherever you need and pass the required arguments and event handler to customize it according to your needs.

<table-comp [data]="arguments" (eventHandler)="FunctionName()">
</table-comp>

answered Feb 8, 2019 at 8:47

Kuldeep Bhimte

9591 gold badge10 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular component inheritance

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related