How do I make a copy of a component in Angular?

Question

JavaScript

I use Angular 5 on the project, I do pagination using ngx-pagination. There was such a moment that pagination needs to be added above and below the tables.

<div class="admin-panel__nav-block navigation-block">
        <app-table-filter-size (valueChange)="valueChange($event)" [size]="size"></app-table-filter-size>
        <pagination-controls class="table-pagination pagination-block" previousLabel="Previous" nextLabel="Next" id="listing_pagination" (pageChange)="pageChange(p = $event)"></pagination-controls>
    </div>

<!--Table --> 
...
<!--Table End --> 
    <div class="admin-panel__nav-block navigation-block">
        <app-table-filter-size (valueChange)="valueChange($event)" [size]="size"></app-table-filter-size>
        <pagination-controls class="table-pagination pagination-block" previousLabel="Previous" nextLabel="Next" id="listing_pagination" (pageChange)="pageChange(p = $event)"></pagination-controls>
    </div>

this will work, but this is probably not a good practice, since the same id is used in different places. You cannot delete the id, it is used to build a table when changing the page on pagination. How to proceed in my situation?