Angular -- Stick to DRY by reusing a template for a child component or stick to SOLID by not...

I have a base component with a template that contains most of what child components do - namely, a couple of forms (with form-specific change observation methods) based on what dropdown value is selected via *ngIf.

Some functionality of the child components is different and the dropdown contains additional options. Overriding the base component's methods and defining new ones helped with the functionality.

I wanted to reuse the base template as well (by pointing the template argument of @Component in child to the base template), since it's almost identical to the base template, but if I try to add the additional form with its child-exclusive *ngIf and change observer to the base component, I have to carry all those child-specific methods to the base component, breaking single responsibility.

What's the better option here, design-wise? The template is pretty small, and so are the methods.

Continue reading...