Web SDK documentation
  1. Components
  2. LoadMoreComponent

File

core/common/load-more.component.ts

Metadata

selector c8y-load-more
templateUrl ./load-more.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor(element: ElementRef)
Parameters :
Name Type Optional
element ElementRef No

Inputs

class

Type : string

Default value : 'c8y-list__item p-0'

container

Type : ElementRef

hidden

Default value : false

loadingLabel

Type : string

loadNextLabel

Type : string

maxIterations

Default value : 10

noMoreDataHint

Type : TemplateRef<any>

paging

Type : Paging<any>

useIntersection

Default value : true

Outputs

onLoad $event Type: EventEmitter

HostBindings

class
class:

Methods

Async loadMore
loadMore(event?)
Parameters :
Name Optional
event Yes
Returns : any
ngAfterContentInit
ngAfterContentInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

counter
counter: number
Type : number
Default value : 0
isLoading
isLoading:
Default value : false
showNoMoreDataHint
showNoMoreDataHint:
Default value : false

Accessors

hasMore
gethasMore() 
<button
  class="btn btn-default btn-block text-center"
  (click)="loadMore($event)"
  [ngClass]="{ 'btn-pending': isLoading }"
  *ngIf="hasMore"
  [style.visibility]="hidden ? 'hidden' : 'visible'"
  [style.height]="hidden ? '1px' : null"
  title="{{ 'Load more' | translate }}"
>
  <ng-container *ngIf="!isLoading">
    <span *ngIf="loadNextLabel; else loadPage" [innerHTML]="loadNextLabel | translate"></span>
    <ng-template #loadPage>
      <span translate ngNonBindable [translateParams]="{ pageNo: paging.currentPage + 1 }">
        Load page {{ pageNo }}</span
      >
    </ng-template>
  </ng-container>
  <ng-container *ngIf="isLoading">
    <span *ngIf="loadingLabel; else loading" [innerHTML]="loadingLabel | translate"></span>
    <ng-template #loading>
      <span translate ngNonBindable [translateParams]="{ pageNo: paging.currentPage + 1 }">
        Page {{ pageNo }} is loading…
      </span>
    </ng-template>
  </ng-container>
</button>

<ng-container *ngIf="showNoMoreDataHint">
  <ng-container *ngTemplateOutlet="noMoreDataHint || finishHint"></ng-container>
</ng-container>

<ng-template #finishHint>
  <div class="legend form-block center last-record" title="{{ 'Last record' | translate }}">
    <i [c8yIcon]="'circle'"></i>
  </div>
</ng-template>

result-matching ""

    No results matching ""