How to make Angular components and services more DRY?

Issue

I find myself running into the same problem in all of my Angular applications and I'm having the hardest time knowing what to Google for a solution.

The problem: I feel like I write a lot of components and services that do VERY similar things but I can't quite figure out how to make them more generic. In my example app, I have candidates and employees components. Each has a corresponding service.

https://stackblitz.com/edit/angular-ivy-92xryd?file=src/app/app.component.html

I can't fight the feeling that I could write something similar to a HOF that could help me sort of "generate" these components and services on the fly. It just feels very redundant to be writing these components and services that are basically performing the same CRUD-type operations. And it seems like it inhibits scalability. I'm not sure exactly what it is I'm looking for but it seems like I'm missing something. Thanks for your help!

Solution

Looks like candidate and employee shares common factor, which is a "beeing a person" . You can extract common "person" component to display details of both of them. Also you could use <ng-content> or <ng-template> in some app-person component to add extra content that is specific to employee or candidate in which case HOST component specifies what should be added to each employee or candidate.

Answered By - Antoniossss