Как отрефакторить такой код?

Question

8realdima8 @8realdima8

Angular

Как отрефакторить такой код?

Есть такой блок кода в котором я использую *ngFor , но внутри блока я вижу, что есть часть конструкций которые повторяются, но как их отрефакторить и стоит ли это в данном случае делать?

<div class="admin-table__row" *ngFor="let developer of developerReferenceList| paginate: { itemsPerPage: size, currentPage: p, totalItems: totalCount }; index as i">
                <div class="admin-table__cell _center">
                    <div class="admin-table__checkbox ui checkbox">
                        <input type="checkbox" name="example" [(ngModel)]="developer.selected" (change)="checkIfAllSelected()">
                        <label></label>
                    </div>
                    <div class="admin-table__number">{{i+1}}</div>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.id.value">{{developer.id}}</div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.title.value">{{developer.title}}</div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.phone.value">{{developer.phone}}</div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.website.value"><a >{{developer.website}}</a></div>

                <div class="admin-table__cell" *ngIf="tableColumnsConfig.avito_id.value">
                    <div class="admin-table__cell-content">
                        <a class="admin-table__edit-field edit-field" (click)="saveCurrentData(developer.id, developer.avito_id, 'avito_id')" suiPopup [popupTemplate]="popupTemplate" popupTrigger="outsideClick">{{developer.avito_id}}
                        </a>
                    </div>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.cian_id.value">
                    <div class="admin-table__cell-content">
                        <a class="admin-table__edit-field edit-field" (click)="saveCurrentData(developer.id, developer.cian_id, 'cian_id')" suiPopup [popupTemplate]="popupTemplate" popupTrigger="outsideClick">{{developer.cian_id}}
                        </a>
                    </div>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.ya_id.value">
                    <div class="admin-table__cell-content">
                        <a class="admin-table__edit-field edit-field" (click)="saveCurrentData(developer.id, developer.ya_id, 'ya_id')" suiPopup [popupTemplate]="popupTemplate" popupTrigger="outsideClick">{{developer.ya_id}}
                        </a>
                    </div>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.emls_id.value">
                    <div class="admin-table__cell-content">
                        <a class="admin-table__edit-field edit-field" (click)="saveCurrentData(developer.id, developer.emls_id, 'emls_id')" suiPopup [popupTemplate]="popupTemplate" popupTrigger="outsideClick">{{developer.emls_id}}
                        </a>
                    </div>

                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.esbn_id.value">
                    <div class="admin-table__cell-content">
                        <a class="admin-table__edit-field edit-field" (click)="saveCurrentData(developer.id, developer.esbn_id, 'esbn_id')" suiPopup [popupDelay]="2000" [popupTemplate]="popupTemplate" popupTrigger="outsideClick">{{developer.esbn_id}}
                        </a>
                    </div>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.tinkoff_id.value">
                    <div class="admin-table__cell-content">
                        <a class="admin-table__edit-field edit-field" (click)="saveCurrentData(developer.id, developer.tinkoff_id, 'tinkoff_id')" suiPopup [popupTemplate]="popupTemplate" popupTrigger="outsideClick">{{developer.tinkoff_id}}
                        </a>
                    </div>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.developer_status.value">Активен</div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.changeLog.value">
                    <a href="">14.03.17, 15:30 </a>
                    <p>Встретиться на объекте</p>
                </div>
                <div class="admin-table__cell" *ngIf="tableColumnsConfig.tasks.value">
                   <!--todo: Доделать задачи -->
                </div>
                <div class="admin-table__cell">
                    <button class="admin-table__tariff-btn" title="Редактировать" (click)="openUpdateDeveloperModal(developer)">
                        <svg class="svg-icon _size-17">
                            <use xlink:href="#ico-pencil-button"></use>
                        </svg>
                    </button>
                    <button class="admin-table__tariff-btn" title="Удалить застройщика"  (click)="openDeleteConfirmModal(developer.id)">
                        <svg class="svg-icon _size-17">
                            <use xlink:href="#ico-close-cross"></use>
                        </svg>
                    </button>
                </div>
            </div>