File

core/common/load-more.component.ts

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor(element: ElementRef, cdRef: ChangeDetectorRef)
Parameters :
Name Type Optional
element ElementRef No
cdRef ChangeDetectorRef No

Inputs

class
Type : string
Default value : 'c8y-list__item p-0'
container
Type : ElementRef
hidden
Type : boolean
Default value : false
hideNoMoreDataHint
Type : boolean
Default value : false
loadingLabel
Type : string
loadingTemplate
Type : TemplateRef<any>
loadNextLabel
Type : string
maxIterations
Type : number
Default value : 10
noMoreDataHint
Type : TemplateRef<any>
paging
Type : Paging<any>
useIntersection
Type : boolean
Default value : true

Outputs

onLoad
Type : EventEmitter

HostBindings

class
Type : string

Methods

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

Properties

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

Accessors

hostClass
gethostClass()
hasMore
gethasMore()
<button
  class="btn btn-default btn-block text-center"
  (click)="loadMore($event)"
  [ngClass]="{ 'btn-pending': isLoading }"
  *ngIf="hasMore && !(loadingTemplate && isLoading)"
  [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="hasNoMoreData && !hideNoMoreDataHint && !isLoading">
  <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>

<ng-container *ngIf="loadingTemplate && isLoading">
  <ng-container *ngTemplateOutlet="loadingTemplate"></ng-container>
</ng-container>

results matching ""

    No results matching ""