File
Implements
Metadata
| selector |
cd-refresh-selector |
| styleUrls |
./refresh-selector.component.scss |
| templateUrl |
./refresh-selector.component.html |
Methods
|
changeRefreshInterval
|
changeRefreshInterval(interval: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| interval |
number
|
No
|
|
|
intervalKeys
|
Default value : Object.keys(this.intervalList)
|
|
|
|
intervalList
|
Type : literal type
|
Default value : {
'5 s': 5000,
'10 s': 10000,
'15 s': 15000,
'30 s': 30000,
'1 min': 60000,
'3 min': 180000,
'5 min': 300000
}
|
|
|
|
selectedInterval
|
Type : number
|
|
|
import { Component, OnInit } from '@angular/core';
import { RefreshIntervalService } from '../../services/refresh-interval.service';
@Component({
selector: 'cd-refresh-selector',
templateUrl: './refresh-selector.component.html',
styleUrls: ['./refresh-selector.component.scss']
})
export class RefreshSelectorComponent implements OnInit {
selectedInterval: number;
intervalList: { [key: string]: number } = {
'5 s': 5000,
'10 s': 10000,
'15 s': 15000,
'30 s': 30000,
'1 min': 60000,
'3 min': 180000,
'5 min': 300000
};
intervalKeys = Object.keys(this.intervalList);
constructor(private refreshIntervalService: RefreshIntervalService) {}
ngOnInit() {
this.selectedInterval = this.refreshIntervalService.getRefreshInterval() || 5000;
}
changeRefreshInterval(interval: number) {
this.refreshIntervalService.setRefreshInterval(interval);
}
}
<div class="row">
<div class="col-xs-5 col-sm-2 refresh-selector">
<label class="control-label col-xs-5 col-sm-5"
for="refreshInterval">
<span i18n>Refresh</span>
</label>
<div class="col-xs-7 col-sm-7">
<select id="refreshInterval"
name="refreshInterval"
class="form-control"
(change)="changeRefreshInterval($event.target.value)"
[(ngModel)]="selectedInterval">
<option *ngFor="let key of intervalKeys"
[value]="intervalList[key]">{{ key }}</option>
</select>
</div>
</div>
</div>
.refresh-selector {
padding: 0;
float: right;
margin-right: 60px;
* {
padding: 0;
box-sizing: border-box;
}
label {
padding: 10px 10px 0 0;
text-align: right;
margin: 0;
}
@media (min-width: 500px) and (max-width: 767px) {
width: 24vw;
}
@media (min-width: 1200px) {
width: 12vw;
}
@media (min-width: 1400px) {
width: 10vw;
}
}
Legend
Html element with directive