core/common/forOf.directive.ts
A directive to iterate over IResultList
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:
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:
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):
<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>@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
) {}
}| Selector | [c8yFor] |
Methods |
Inputs |
Outputs |
Accessors |
constructor(tpl: TemplateRef
|
|||||||||||||||
|
Parameters :
|
| c8yForComparator |
Type : function
|
|
A comparator function for comparing list items. Used to determine the position at which a new element should be added to the list. |
| c8yForEnableVirtualScroll |
Type : boolean
|
Default value : false
|
|
Enable virtual scroll rendering method. |
| c8yForLoadingTemplate |
|
A custom loading component. |
| c8yForLoadNextLabel |
Type : string
|
|
Load next text label. |
| c8yForMaxIterations |
Type : number
|
|
The maximum numbers of iterations to call data from the api. |
| c8yForNotFound |
|
A template to use if no data is found at all (e.g. if you apply a filter pipe). |
| c8yForOf |
|
The data setter. Must be a response from @c8y/data or an observable. You can pass an observable with null to explicitly clear the list. |
| c8yForPipe |
Type : any
|
|
The pipe setter to attach any rxjs pipe to the current and more loaded data. |
| c8yForRealtime |
|
A RealtimeService instance. |
| c8yForRealtimeOptions |
|
Realtime options. |
| c8yForVirtualScrollContainerHeight |
Type : number
|
|
When used fixed strategy, there needs to be fixed height set on scrolling container. |
| c8yForVirtualScrollElementSize |
Type : any
|
|
Provides fixed item size for virtual scroll window strategy. |
| c8yForCount |
Type : EventEmitter
|
|
The number of items currently loaded in the list. |
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| c8yForOf | ||||||
setc8yForOf(fetchData: IResultList
|
||||||
|
The data setter. Must be a response from @c8y/data or an observable. You can pass an observable with null to explicitly clear the list.
Parameters :
Returns :
void
|
| c8yForLoadMore | ||||||
setc8yForLoadMore(type: LoadMoreMode)
|
||||||
|
The mode setter:
Parameters :
Returns :
void
|
| c8yForPipe | ||||
setc8yForPipe(dataPipe)
|
||||
|
The pipe setter to attach any rxjs pipe to the current and more loaded data.
Parameters :
Returns :
void
|
| c8yForNotFound | ||||||
setc8yForNotFound(notFoundTemplate: TemplateRef
|
||||||
|
A template to use if no data is found at all (e.g. if you apply a filter pipe).
Parameters :
Returns :
void
|
| c8yForMaxIterations | ||||||
setc8yForMaxIterations(maxIterations: number)
|
||||||
|
The maximum numbers of iterations to call data from the api.
Parameters :
Returns :
void
|
| c8yForLoadingTemplate | ||||||
setc8yForLoadingTemplate(loadingTemplate: TemplateRef
|
||||||
|
A custom loading component.
Parameters :
Returns :
void
|
| c8yForLoadNextLabel | ||||||
setc8yForLoadNextLabel(loadNextLabel: string)
|
||||||
|
Load next text label.
Parameters :
Returns :
void
|
| c8yForRealtime | ||||||
setc8yForRealtime(source: RealtimeService<any>)
|
||||||
|
A RealtimeService instance.
Parameters :
Returns :
void
|
| c8yForRealtimeOptions | ||||||
setc8yForRealtimeOptions(realtimeOptions: ForOfRealtimeOptions)
|
||||||
|
Realtime options.
Parameters :
Returns :
void
|
| c8yForComparator | ||||||
setc8yForComparator(comparator: (itemA: object,itemB: object) => void)
|
||||||
|
A comparator function for comparing list items. Used to determine the position at which a new element should be added to the list.
Parameters :
Returns :
void
|