File
Implements
Metadata
| selector |
ngx-temperature |
| styleUrls |
temperature.component.scss |
| templateUrl |
./temperature.component.html |
Constructor
constructor(theme: NbThemeService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| theme |
NbThemeService
|
no
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
humidityMode
|
humidityMode: string
|
Type : string
|
Default value : 'heat'
|
|
|
|
humidityOff
|
humidityOff:
|
Default value : false
|
|
|
|
temperature
|
temperature: number
|
Type : number
|
Default value : 24
|
|
|
|
temperatureMode
|
temperatureMode: string
|
Type : string
|
Default value : 'cool'
|
|
|
|
temperatureOff
|
temperatureOff:
|
Default value : false
|
|
|
|
themeSubscription
|
themeSubscription: any
|
Type : any
|
|
|
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-temperature',
styleUrls: ['./temperature.component.scss'],
templateUrl: './temperature.component.html',
})
export class TemperatureComponent implements OnDestroy {
temperature = 24;
temperatureOff = false;
temperatureMode = 'cool';
humidity = 87;
humidityOff = false;
humidityMode = 'heat';
colors: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
this.colors = config.variables;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}
<nb-card size="large">
<nb-tabset fullWidth>
<nb-tab tabTitle="Temperature">
<div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="12" [max]="30" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature">
{{ temperatureOff ? '--' : (temperature | ngxRound) }}
</div>
<div class="desc">
Celsius
</div>
</div>
</ngx-temperature-dragger>
</div>
<div [(ngModel)]="temperatureMode" ngbRadioGroup data-toggle="buttons"
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
</label>
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
</label>
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
</label>
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
</label>
</div>
</nb-tab>
<nb-tab tabTitle="Humidity">
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="0" [max]="100" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity">
{{ humidityOff ? '--' : (humidity | ngxRound) }}
</div>
</div>
</ngx-temperature-dragger>
</div>
<div [(ngModel)]="humidityMode" ngbRadioGroup data-toggle="buttons"
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
</label>
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
</label>
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
</label>
<label ngbButtonLabel class="btn btn-icon">
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
</label>
</div>
</nb-tab>
</nb-tabset>
</nb-card>
Legend
Html element with directive