File
|
formGroup
|
Default value : this.service.formGroup
|
|
|
import {Component} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatLabel} from '@angular/material/form-field';
import {MatSlider, MatSliderThumb} from '@angular/material/slider';
import {AppService} from '../../services/app.service';
@Component({
imports: [MatLabel, MatSlider, MatSliderThumb, ReactiveFormsModule],
selector: 'app-plot-settings-panel',
styleUrl: './plot-settings-panel.component.scss',
templateUrl: './plot-settings-panel.component.html',
})
export class PlotSettingsPanelComponent {
formGroup = this.service.formGroup;
constructor(private service: AppService) {}
}
<div class="height-full overflow-auto">
<div class="settings-section">
<mat-label class="label">Map Settings</mat-label>
<div class="padding-x-2">
<div class="padding-top-2">
<mat-label>Hazard Map Opacity</mat-label>
<mat-slider discrete min="0" max="100">
<input
matSliderThumb
[formControl]="formGroup.controls.overlayOpacity"
/>
</mat-slider>
</div>
</div>
</div>
</div>
Legend
Html element with directive