@Component({
  selector: 'my-entity-list',
  templateUrl: './my-entity-list.component.html',
  styleUrls: ['./my-entity-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyEntityListComponent extends BaseListComponent<GetMyEntityList.Query, GetMyEntityList.Items> {
  constructor(
    private dataService: DataService,
    router: Router,
    route: ActivatedRoute,
  ) {
    super(router, route);
    super.setQueryFn(
      (...args: any[]) => this.dataService.query<GetMyEntityList.Query>(GET_MY_ENTITY_LIST),
      data => data.myEntities,
    );
  }
}

<vdr-action-bar>
  <vdr-ab-right>
    <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="['CreateSettings', 'CreateTaxRate']">
      <clr-icon shape="plus"></clr-icon>
      Create new my entity
    </a>
  </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
  [items]="items$ | async"
  [itemsPerPage]="itemsPerPage$ | async"
  [totalItems]="totalItems$ | async"
  [currentPage]="currentPage$ | async"
  (pageChange)="setPageNumber($event)"
  (itemsPerPageChange)="setItemsPerPage($event)"
>
  <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
  <vdr-dt-column></vdr-dt-column>
  <ng-template let-myEntity="item">
    <td class="left align-middle">{{ myEntity.name }}</td>
    <td class="right align-middle">
      <vdr-table-row-action
        iconShape="edit"
        [label]="'common.edit' | translate"
        [linkTo]="['./', myEntity.id]"
      ></vdr-table-row-action>
    </td>
  </ng-template>
</vdr-data-table>

class BaseListComponent<ResultType, ItemType, VariableType = any> implements OnInit, OnDestroy {
  result$: Observable<ResultType>;
  items$: Observable<ItemType[]>;
  totalItems$: Observable<number>;
  itemsPerPage$: Observable<number>;
  currentPage$: Observable<number>;
  protected protected destroy$ = new Subject<void>();
  constructor(router: Router, route: ActivatedRoute)
  setQueryFn(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) => ;
  setPageNumber(page: number) => ;
  setItemsPerPage(perPage: number) => ;
  refresh() => ;
  protected setQueryParam(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
  protected setQueryParam(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
  protected setQueryParam(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;
}