core/common/forOf.directive.ts
A directive to iterate over IResultList
change with maxIterations settings).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.
| Selector | [c8yFor] |
Methods |
Inputs |
Accessors |
constructor(tpl: TemplateRef
|
||||||||||||
|
Parameters :
|
c8yForComparator
|
A comparator function for comparing list items. Used to determine the position at which a new element should be added to the list.
Type : |
c8yForMaxIterations
|
The maximum numbers of iterations to call data from the api.
Type : |
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
|
The pipe setter to attach any rxjs pipe to the current and more loaded data. |
c8yForRealtime
|
A RealtimeService instance. |
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| c8yForOf | ||||
setc8yForOf(fetchData)
|
||||
|
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)
|
||||
|
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)
|
||||
|
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
|
| c8yForRealtime | ||||
setc8yForRealtime(source)
|
||||
|
A RealtimeService instance.
Parameters :
Returns :
void
|
| c8yForComparator | ||||||
setc8yForComparator(comparator: function)
|
||||||
|
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
|