src/app/shared/modal/modal/modal.component.ts
dialog.open(CheckoutSuccessMessageDialogComponent, {
panelClass: 'special-pane-no-padding'
})
Then inside the CheckoutSuccessMessageDialogComponents UI layer, we wrap the UI inside <modal></modal>| changeDetection | ChangeDetectionStrategy.OnPush |
| encapsulation | ViewEncapsulation.None |
| selector | modal |
| styleUrls | ./modal.component.scss |
| templateUrl | ./modal.component.html |
| onClose | |
Type : EventEmitter<any>
|
|
import { Component, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy } from "@angular/core"
/**
* @description a re-usable modal template that leverages ng-content for content transclusion
* In order for it to properly work, we need to override some default container values by adding a custom panel class from this component
* @example
* dialog.open(CheckoutSuccessMessageDialogComponent, {
* panelClass: 'special-pane-no-padding'
* })
*
* Then inside the CheckoutSuccessMessageDialogComponents UI layer, we wrap the UI inside <modal></modal>
*/
@Component({
selector: 'modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ModalComponent {
@Output() onClose: EventEmitter<any> = new EventEmitter<any>()
}<div class="modal">
<div class="close" (click)="onClose.emit()" fxLayoutAlign="center center">
<mat-icon>close</mat-icon>
</div>
<ng-content></ng-content>
</div>
./modal.component.scss
@import '../../../../styles/colors';
.modal {
position: relative;
padding: 1rem;
.close {
position: absolute;
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
background-color: $primary;
border-radius: 15rem;
color: $white;
&:hover {
cursor: pointer;
}
}
}
// For proper positioning of the close X icon, we need to override some default values for the mat dialog container
// therefore, please add `special-pane-no-padding` as a panelClass to the dialog being opened
// ie: dialog.open(CheckoutSuccessMessageDialogComponent, {
// panelClass: 'special-pane-no-padding'
// })
.special-pane-no-padding {
.mat-dialog-container {
padding: 0;
overflow: visible;
}
}