projects/web-mev/src/app/features/analysis/components/analysis-plotting-result/analysis-plotting-result.component.ts
Analysis Plotting Result Component Container component used for displaying plotting results It is a front-end only operation and no real operation is executed, so use modal dialog to display plotting results and not Executed Operation Component
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-analysis-plotting-result |
| styleUrls | ./analysis-plotting-result.component.scss |
| templateUrl | ./analysis-plotting-result.component.html |
Properties |
constructor(dialogRef: MatDialogRef
|
|||||||||
|
Parameters :
|
| Public data |
Type : any
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
| Public dialogRef |
Type : MatDialogRef<AnalysisPlottingResultComponent>
|
import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
/**
* Analysis Plotting Result Component
* Container component used for displaying plotting results
* It is a front-end only operation and no real operation is executed, so
* use modal dialog to display plotting results and not Executed Operation Component
*/
@Component({
selector: 'mev-analysis-plotting-result',
templateUrl: './analysis-plotting-result.component.html',
styleUrls: ['./analysis-plotting-result.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AnalysisPlottingResultComponent {
constructor(
public dialogRef: MatDialogRef<AnalysisPlottingResultComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
}
<div class="container">
<div class="mat-dialog-content">
<mev-box-plotting [outputs]="data.boxPlotData"></mev-box-plotting>
</div>
</div>
./analysis-plotting-result.component.scss
* {
font-size: 14px;
}
.container {
display: flex;
flex-direction: column;
width: 90vw;
min-height: 500px;
max-height: 600px;
overflow-x: hidden;
overflow-y: scroll;
}
.mat-dialog-content {
max-height: none;
overflow: visible;
}