File
|
Public
Readonly
action
|
Type : string
|
|
|
import {
ChangeDetectionStrategy,
Component,
Inject,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {
MAT_DIALOG_DATA,
MatDialogModule,
} from '@angular/material/dialog';
import { SantizationPipe } from '@rxap/pipes/santization';
export interface ConfirmDialogData {
message: string;
action?: string;
}
@Component({
selector: 'rxap-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatDialogModule, MatButtonModule, SantizationPipe]
})
export class ConfirmDialogComponent {
public readonly action: string;
public readonly data: ConfirmDialogData;
constructor(
@Inject(MAT_DIALOG_DATA)
data: ConfirmDialogData,
) {
this.data = data;
this.action = this.data.action ?? 'OK';
}
}
<h2 i18n mat-dialog-title>Confirm</h2>
<mat-dialog-content>
<div [innerHtml]="data.message | santization:'html'" class="content"></div>
</mat-dialog-content>
<mat-dialog-actions>
<button [mat-dialog-close]="false" i18n mat-button>Cancel</button>
<button [mat-dialog-close]="true" color="accent" mat-raised-button>{{ action }}</button>
</mat-dialog-actions>
.content {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
}
Legend
Html element with directive