core/common/forOf.directive.ts

Docs

Description

A directive to iterate over IResultList<T> data from @c8y/client. Depending on the [c8yForLoadMore] a load more button is:

auto: Tries to automatically load more data (default maximum 10 iterations; can be change with maxIterations settings).
show: Shows a load more button for the user to decide
none: Doesn't perform any load more action.
hidden: Loads more data automatically but with no visible button for the user.

Additional, any rxjs operator pipe can be applied to the [c8yForPipe] input, e.g. to filter the data displayed currently as well as the data loaded by subsequent requests.

Example :

<div *c8yFor="let device of devices; loadMore: 'auto'; let i = index; pipe: filterPipe;">
 {{ i + 1 }}. {{device.name}}
</div>

The above example will list all entities that are applied to devices:

Example :

this.devices = this.inventoryService.list({ pageSize: 10, fragmentType: 'c8y_IsDevice' })

It will display the first 10 items, if there is more space left on the screen, and there are more than 10 devices, it will automatically load up to 10 pages more. If it still can't fit the screen it will stop and switch to show mode.

A pipe can be applied e.g. for filtering or grouping. This pipe is attached to every follow up request done by the load more component:

Example :

this.filterPipe = pipe(
   map((data: []) => {
    return data.filter(
     (mo: any) => mo.name && mo.name.toLowerCase().indexOf(value.toLowerCase()) > -1
   );
 })
);

The pipe must be an rxjs pipe and can take any operator.

Example with realtime support and items count output (e.g. for handling empty state and header):

Example :

<c8y-list-group>
  <div class="c8y-empty-state" *ngIf="count === 0">
    (...)
  </div>

  <div class="page-sticky-header hidden-xs c8y-list__item c8y-list--timeline" *ngIf="count > 0">
    (...)
  </div>

  <ng-template
    c8yFor
    let-operation
    [c8yForOf]="items$"
    [c8yForPipe]="filterPipe"
    [c8yForRealtime]="realtime"
    [c8yForRealtimeOptions]="realtimeOptions"
    (c8yForCount)="count = $event"
  >
    <c8y-li-timeline>
      (...)
    </c8y-li-timeline>
  </ng-template>
</c8y-list-group>

Example :

@Component({
  (...)
})
export class ExampleComponent {
  @Input() deviceId: IIdentified;
  items$ = this.operationService.list({
    deviceId: this.deviceId,
    fragmentType: 'c8y_MyOperation',
    dateFrom: new Date(0).toISOString(),
    dateTo: new Date(Date.now()).toISOString(),
    revert: true,
    withTotalPages: true
  });
  filterPipe = pipe(map((ops: IOperation[]) => ops.filter(op => op.c8y_MyOperation)));
  realtimeOptions: ForOfRealtimeOptions = {
    entityOrId: this.deviceId,
    removeOnUpdate: true,
    insertOnUpdate: true
  } as ForOfRealtimeOptions;
  count: number;

  constructor(
    private operationService: OperationService,
    public realtime: OperationRealtimeService
  ) {}
}

Example

Metadata

Selector	`[c8yFor]`
Standalone	`true`

Description

Example

Metadata

Relationships

Used by

Depends on

results matching ""

No results matching ""