Как сделаю копию компонента в Angular?

Question

[kachurinets]

На проекте использую Angular 5, делаю пагинацию с использованием либы ngx-pagination. Возник такой момент, что пагинацию нужно добавить сверху и снизу в таблицы.

<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>

так будет работать, но это скорее всего не очень хорошая практика, так как используется одинаковая id в разных местах. Удалить id нельзя, она используется для построение таблицы при изменении странице на пагинации. Как поступить в моей ситуации?

Comments

[kachurinets]

MaxKorz,

<div class="admin-table__row" *ngFor="let item of addressesList | paginate: { id: 'listing_pagination', itemsPerPage: size, currentPage: p, totalItems: totalCount} ">

id используется для того, чтобы работала пагинация, согласно доке обязательный параметр

[theykillimmortal]

Согласно документации (смотрите раздел Multiple Instances) Вы можете добавлять несколько компонентов, используя разные id. То есть Вам лучше бы все-таки добавить разные id и просто вызывать один и тот же метод на событие pageChange.