@bmat/angular-panel-service

This module provides a service to create dialogs with a panel style.

Creating panels

The main piece is the Angular service PanelService. This service provide a method

open(
    embedComp: ComponentType<T> | TemplateRef<T>,
    options: Partial<OpenPanelOption<E>> = {},
  ): PanelRef<T, E>

Calling this method will create the panel and return a PanelRef object:

export class PanelRef<CLOSE extends any = any, DATA extends any = any> {
  public readonly data: DATA;
  public readonly close: (value: CLOSE) => void;
  public readonly valueChanges$: Observable<PanelAction<CLOSE>>;
  public readonly dismiss: () => void;

  public componentInstance: ComponentType<DATA> | null = null;
}

The PanelRef is injected in the created element and can be used to close (semantically close the dialog and send a result message) and dismiss (close and do not send a message, like for example clicking a backdrop).

valueChanges$ streams the events Open, Close and Dismiss with the related payload

Adding panel components

Panel components, not TemplateRef, need to be added to a NgModule.entryComponents as they are dynamically created.