angular-dialog
  1. Interfaces
  2. MessageDialogConfig

File

src/lib/message-dialog/message-dialog.service.ts

Index

Properties

Properties

ariaDescribedBy
ariaDescribedBy: string | null
Type : string | null
Optional

ID of the element that describes the dialog.
ariaLabel
ariaLabel: string | null
Type : string | null
Optional

Aria label to assign to the dialog element.
ariaLabelledBy
ariaLabelledBy: string | null
Type : string | null
Optional

ID of the element that labels the dialog.
autoFocus
autoFocus: boolean
Type : boolean
Optional

Whether the dialog should focus the first focusable element on open.
backdropClass
backdropClass: string
Type : string
Optional

Custom class for the backdrop.
closeOnNavigation
closeOnNavigation: boolean
Type : boolean
Optional

Whether the dialog should close when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).
direction
direction: Direction
Type : Direction
Optional

Layout direction for the dialog's content.
hasBackdrop
hasBackdrop: boolean
Type : boolean
Optional

Whether the dialog has a backdrop.
height
height: string
Type : string
Optional

Height of the dialog.
maxHeight
maxHeight: number | string
Type : number | string
Optional

Max-height of the dialog. If a number is provided, assumes pixel units.
maxWidth
maxWidth: number | string
Type : number | string
Optional

Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw.
minHeight
minHeight: number | string
Type : number | string
Optional

Min-height of the dialog. If a number is provided, assumes pixel units.
minWidth
minWidth: number | string
Type : number | string
Optional

Min-width of the dialog. If a number is provided, assumes pixel units.
panelClass
panelClass: string | string[]
Type : string | string[]
Optional

Custom class for the overlay pane.
position
position: DialogPosition
Type : DialogPosition
Optional

Position overrides.
restoreFocus
restoreFocus: boolean
Type : boolean
Optional

Whether the dialog should restore focus to the previously-focused element, after it's closed.
scrollStrategy
scrollStrategy: ScrollStrategy
Type : ScrollStrategy
Optional

Scroll strategy to be used for the dialog.
width
width: string
Type : string
Optional

Width of the dialog.

 
import { Direction } from '@angular/cdk/bidi';
import { ScrollStrategy } from '@angular/cdk/overlay';
import {
  Inject,
  Injectable,
} from '@angular/core';
import {
  DialogPosition,
  MatDialog,
} from '@angular/material/dialog';
import {
  map,
  take,
} from 'rxjs/operators';
import { MessageDialogComponent } from './message-dialog.component';
import { MessageDialogData } from './types';

export interface MessageDialogConfig {
  /** Custom class for the overlay pane. */
  panelClass?: string | string[];
  /** Whether the dialog has a backdrop. */
  hasBackdrop?: boolean;
  /** Custom class for the backdrop. */
  backdropClass?: string;
  /** Width of the dialog. */
  width?: string;
  /** Height of the dialog. */
  height?: string;
  /** Min-width of the dialog. If a number is provided, assumes pixel units. */
  minWidth?: number | string;
  /** Min-height of the dialog. If a number is provided, assumes pixel units. */
  minHeight?: number | string;
  /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */
  maxWidth?: number | string;
  /** Max-height of the dialog. If a number is provided, assumes pixel units. */
  maxHeight?: number | string;
  /** Position overrides. */
  position?: DialogPosition;
  /** Layout direction for the dialog's content. */
  direction?: Direction;
  /** ID of the element that describes the dialog. */
  ariaDescribedBy?: string | null;
  /** ID of the element that labels the dialog. */
  ariaLabelledBy?: string | null;
  /** Aria label to assign to the dialog element. */
  ariaLabel?: string | null;
  /** Whether the dialog should focus the first focusable element on open. */
  autoFocus?: boolean;
  /**
   * Whether the dialog should restore focus to the
   * previously-focused element, after it's closed.
   */
  restoreFocus?: boolean;
  /** Scroll strategy to be used for the dialog. */
  scrollStrategy?: ScrollStrategy;
  /**
   * Whether the dialog should close when the user goes backwards/forwards in history.
   * Note that this usually doesn't include clicking on links (unless the user is using
   * the `HashLocationStrategy`).
   */
  closeOnNavigation?: boolean;
}

@Injectable({ providedIn: 'root' })
export class MessageDialogService {
  constructor(
    @Inject(MatDialog)
    private readonly dialog: MatDialog,
  ) {
  }

  public open(
    data: MessageDialogData,
    config?: MessageDialogConfig,
  ): Promise<string | undefined> {
    const dialogRef = this.dialog.open<MessageDialogComponent,
      MessageDialogData,
      string>(MessageDialogComponent, {
      ...config,
      data,
    });

    return dialogRef
      .afterClosed()
      .pipe(
        take(1),
        map((result) => result),
      )
      .toPromise();
  }
}

results matching ""

    No results matching ""