core/list-display-switch/list-display-switch.component.ts
OnInit
| selector | c8y-list-display-switch |
| templateUrl | ./list-display-switch.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
Accessors |
constructor(location: Location)
|
||||||
|
Parameters :
|
| filterPipe |
Type : any
|
Default value : pipe(tap())
|
| listKey |
Type : string
|
| listLength |
Type : number
|
| onListClassChange |
Type : EventEmitter<string>
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onOptionSelect | ||||||
onOptionSelect(option: DisplayOption)
|
||||||
|
Parameters :
Returns :
void
|
| Readonly DISPLAY_OPTIONS |
Type : DisplayOption[]
|
Default value : [
{
name: 'AUTO',
value: 'auto',
label: gettext('Auto'),
default: true,
getListClass: () => {
const option =
this._listLength > this.AUTO_GRID_ITEMS_LIMIT
? this.DISPLAY_OPTIONS.find(opt => opt.name === 'LIST')
: this.DISPLAY_OPTIONS.find(opt => opt.name === 'GRID');
return option.getListClass();
}
},
{
name: 'GRID',
value: 'grid',
label: gettext('Grid'),
getListClass: () => 'interact-grid'
},
{
name: 'LIST',
value: 'list',
label: gettext('List'),
getListClass: () => 'interact-list'
}
]
|
| selectedOption |
Type : DisplayOption
|
| listLength | ||||||
setlistLength(val: number)
|
||||||
|
Parameters :
Returns :
void
|
<div class="d-flex">
<label class="m-r-8" id="listLabel">
{{ 'Display as' | translate }}
</label>
<div class="c8y-select-wrapper">
<select
aria-labelledby="listLabel"
name="listLabel"
class="form-control"
[ngModel]="selectedOption"
(ngModelChange)="onOptionSelect($event)"
[attr.aria-label]="'Display mode' | translate"
>
<option *ngFor="let option of DISPLAY_OPTIONS" [ngValue]="option">
{{ option.label | translate }}
</option>
</select>
<span></span>
</div>
</div>