lib/components/plot-settings-axis/plot-settings-axis.component.ts
Angular material form fields for plot axis settings.
| selector | nshmp-plot-settings-axis |
| imports |
MatLabel
MatFormField
MatInput
MatButtonToggleGroup
MatButtonToggle
ReactiveFormsModule
NshmpSectionComponent
|
| styleUrls | ./plot-settings-axis.component.scss, |
| templateUrl | ./plot-settings-axis.component.html |
Properties |
constructor()
|
| Readonly label |
Default value : input('Axis')
|
| Readonly settings |
Default value : input.required<FormGroup<AxisFormGroup>>()
|
import {Component, input} from '@angular/core';
import {FormGroup, ReactiveFormsModule} from '@angular/forms';
import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {NshmpSectionComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {AxisFormGroup} from '../../models/nshmp-plot.model';
/**
* Angular material form fields for plot axis settings.
*/
@Component({
imports: [
MatLabel,
MatFormField,
MatInput,
MatButtonToggleGroup,
MatButtonToggle,
ReactiveFormsModule,
NshmpSectionComponent,
],
selector: 'nshmp-plot-settings-axis',
styleUrls: [
'./plot-settings-axis.component.scss',
'../plot-settings/plot-settings.component.scss',
],
templateUrl: './plot-settings-axis.component.html',
})
export class NshmpPlotSettingsAxisComponent {
readonly settings = input.required<FormGroup<AxisFormGroup>>();
readonly label = input('Axis');
constructor() {}
}
<!-- Plot Settings: Axis -->
@if (settings()) {
<nshmp-section [label]="label()">
<!-- Plot Settings: Axis: title text -->
<mat-form-field class="grid-col-12 axis-title-input">
<mat-label>Title</mat-label>
<input type="text" matInput [formControl]="settings().controls.title.controls.text" />
</mat-form-field>
<!-- Plot Settings: Axis: title font size -->
<mat-form-field class="grid-col-12 axis-title-font-size-input">
<mat-label>Title Font Size</mat-label>
<input matInput type="number" [formControl]="settings().controls.title.controls.size" />
</mat-form-field>
<!-- Plot Settings: Axis: nticks -->
<mat-form-field class="grid-col-12 axis-nticks">
<mat-label>Number of Tick Marks</mat-label>
<input matInput type="number" [formControl]="settings().controls.nticks" />
</mat-form-field>
<!-- Plot Settings: Axis: axis type -->
<div class="mat-form-field-wrapper axis-type-toggle">
<mat-button-toggle-group class="grid-col-12" [formControl]="settings().controls.type">
<mat-button-toggle class="grid-col-6" value="log"> Log </mat-button-toggle>
<mat-button-toggle class="grid-col-6" value="linear"> Linear </mat-button-toggle>
</mat-button-toggle-group>
</div>
</nshmp-section>
}
./plot-settings-axis.component.scss
../plot-settings/plot-settings.component.scss