import { NgFor } from '@angular/common';
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';
import { MessageDialogData } from './types';
@Component({
selector: 'rxap-message-dialog',
templateUrl: './message-dialog.component.html',
styleUrls: ['./message-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatDialogModule, MatButtonModule, NgFor, SantizationPipe]
})
export class MessageDialogComponent {
public readonly data: MessageDialogData;
constructor(
@Inject(MAT_DIALOG_DATA)
data: MessageDialogData,
) {
this.data = data;
}
}
<h2 mat-dialog-title>{{data.title}}</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 *ngFor="let action of data.actions" [color]="action.color" [mat-dialog-close]="action.type"
mat-raised-button>{{ action.label }}</button>
</mat-dialog-actions>
.content {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
}
Legend
Html element with directive