File

src/app/shared/modal/modal/modal.component.ts

Example

dialog.open(CheckoutSuccessMessageDialogComponent, {
panelClass: 'special-pane-no-padding'
})

Then inside the CheckoutSuccessMessageDialogComponents UI layer, we wrap the UI inside <modal></modal>

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
encapsulation	`ViewEncapsulation.None`
selector	`modal`
styleUrls	`./modal.component.scss`
templateUrl	`./modal.component.html`

Outputs

onClose
Type : `EventEmitter<any>`
Defined in src/app/shared/modal/modal/modal.component.ts:21

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;
  }
}

Legend

Html element

Component

Html element with directive

File

Example

Metadata

Outputs

result-matching ""

No results matching ""