components/fault-control/fault-control.component.ts
Fault control with slider and input box.
| selector | app-fault-control |
| imports |
MatLabel
MatSlider
MatTooltip
MatSliderThumb
MatFormField
MatInput
MatSuffix
MatError
ReactiveFormsModule
NgClass
|
| templateUrl | ./fault-control.component.html |
| styleUrl | ./fault-control.component.scss |
Properties |
|
Inputs |
| label | |
Default value : undefined
|
|
|
Label |
|
| parameter | |
| Required : true | |
|
GMM usage parameter with min and max values |
|
| textSuffix | |
Default value : undefined
|
|
|
Input text suffix |
|
| Readonly control |
Default value : input.required<FormControl<number>>()
|
|
Form control state |
| Readonly controlClass |
Default value : input<string>('')
|
| Readonly label |
Default value : undefined
|
|
Label |
| Readonly parameter |
|
GMM usage parameter with min and max values |
| service |
Default value : inject(AppService)
|
| Readonly textSuffix |
Default value : undefined
|
|
Input text suffix |
import {NgClass} from '@angular/common';
import {Component, inject, input} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {MatError, MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {MatSlider, MatSliderThumb} from '@angular/material/slider';
import {MatTooltip} from '@angular/material/tooltip';
import {GmmUsageParameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws/gmm-services';
import {AppService} from '../../services/app.service';
/**
* Fault control with slider and input box.
*/
@Component({
imports: [
MatLabel,
MatSlider,
MatTooltip,
MatSliderThumb,
MatFormField,
MatInput,
MatSuffix,
MatError,
ReactiveFormsModule,
NgClass,
],
selector: 'app-fault-control',
styleUrl: './fault-control.component.scss',
templateUrl: './fault-control.component.html',
})
export class FaultControlComponent {
service = inject(AppService);
/** Form control state */
readonly control = input.required<FormControl<number>>();
/** Label */
readonly label = input<string>(undefined);
/** GMM usage parameter with min and max values */
readonly parameter = input.required<GmmUsageParameter>();
/** Input text suffix */
readonly textSuffix = input<string>(undefined);
readonly controlClass = input<string>('');
}
<mat-label>{{ label() }}</mat-label>
<div class="grid-row grid-gap-lg" [ngClass]="controlClass()">
<div class="grid-col-7">
<mat-slider
discrete
[min]="parameter()?.min"
[max]="parameter()?.max"
matTooltip="Slide to change fault"
(change)="service.callService()"
>
<input matSliderThumb [formControl]="control()" [value]="control().value" />
</mat-slider>
</div>
<mat-form-field class="grid-col-5">
<mat-label>{{ label() }}</mat-label>
<input
matInput
[formControl]="control()"
type="number"
[min]="parameter()?.min"
[max]="parameter()?.max"
(input)="service.callService()"
[value]="control().value"
/>
@if (textSuffix()) {
<span matTextSuffix>{{ textSuffix() }}</span>
}
<mat-error>
[
{{ parameter()?.min }},
{{ parameter()?.max }}
]
</mat-error>
</mat-form-field>
</div>