File
|
Readonly
plots
|
Default value : input.required<PlotSettingsPlots[]>()
|
|
|
import {Component, input} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {PlotSettingsPlots} from '../../models/plot-settings-plots.model';
import {NshmpPlotSettingsComponent} from '../plot-settings/plot-settings.component';
import {NshmpPlotResetPlotSettingComponent} from '../reset-plot-setting/reset-plot-setting.component';
@Component({
imports: [
MatExpansionModule,
NshmpPlotSettingsComponent,
NshmpPlotResetPlotSettingComponent,
MatDivider,
],
selector: 'nshmp-plot-settings-expansion-panel',
styleUrl: './plot-settings-expansion-panel.component.scss',
templateUrl: './plot-settings-expansion-panel.component.html',
})
export class NshmpPlotSettingsExpansionPanelComponent {
readonly plots = input.required<PlotSettingsPlots[]>();
}
<div class="height-full overflow-scroll plot-settings-panel">
<mat-accordion multi>
@for (settings of plots(); track $index) {
<mat-expansion-panel [expanded]="settings.expanded ?? true">
<mat-expansion-panel-header>
<mat-panel-title> {{ settings.plot.label }} Settings </mat-panel-title>
</mat-expansion-panel-header>
<mat-divider />
<nshmp-plot-settings
[plot]="settings.plot"
[showLabel]="false"
(updatedPlot)="settings.updatePlot($event)"
/>
<nshmp-plot-reset-plot-setting
[resetDisabled]="settings.plot.settingsForm.pristine"
[defaultPlotSetting]="settings.defaultPlotSetting"
[plotSettings]="settings.plot.settingsForm"
/>
</mat-expansion-panel>
}
</mat-accordion>
</div>
Legend
Html element with directive