How to automate "copy-paste" in Angular 4 front-end?

Question

Angular

There are a lot of similar components in an Angular 4 application, many of them have tables with data and the same buttons for deleting, adding and editing these tables. The forms for creating table entries are also similar (plus or minus a couple of fields). And in order to make all sections of the application, you have to copy these components in batches and simply change their names, since 70% of the file filling is the same, only the number of fields and variable names are different. How can routine processes be automated? What architecture does not have "copy-paste"?
At the same time, there is Angular-CLI, but you still have to copy-paste code from other components.

Answer 1

You almost answered your own question.
Implement abstract components, whether they are forms or tables with custom functionality (pass the necessary parameters to the component as input, return callbacks as output)
If you need unique cases of abstract components, inherit from previously created ones and already implement a unique part for them.
As a result, you will get one abstract component. say, for tables where you run all the parameters that came from the parent component and render it, you will gradually add common components as needed.
Eventually there will be custom components for modals, notifiers, apploaders, tables, forms, etc. Which encapsulate in themselves all the necessary functionality and accept only settings for certain implementation cases.

Answer 2

Unfortunately, Angular 2+ does not provide a component inheritance mechanism. Therefore, either universal components that "can do everything" and are configured through parameters, or break your components into smaller ones and make many different components from these small ones (i.e. solve the issue through aggregation).