File

projects/i-components/src/lib/components/popup/services/popup.service.ts

Description

PopupService

Index

Properties
Methods

Constructor

constructor(appRef: ApplicationRef, factoryResolver: ComponentFactoryResolver)

Creates an instance of PopupService.

Parameters :
Name Type Optional
appRef ApplicationRef No
factoryResolver ComponentFactoryResolver No

Methods

Private initializeHost
initializeHost()

Initialize the popup host component

Returns : void
remove
remove(tr: TemplateRef)

Remove a popup from the host component

Parameters :
Name Type Optional
tr TemplateRef<any> No
Returns : void
Private removeIfExists
removeIfExists(tr: TemplateRef)

Remove a previously registered instance of the popup element

Parameters :
Name Type Optional
tr TemplateRef<any> No
Returns : void
set
set(tr: TemplateRef, rect: PopupRect, overlay: boolean | undefined)

Sets a new popup to the Host Popup Component

Parameters :
Name Type Optional
tr TemplateRef<any> No
rect PopupRect No
overlay boolean | undefined No
Returns : void

Properties

Private hostComponent
Type : PopupHostComponent | null
Default value : null

PopupHostComponent

popups
Type : PopupData[]
Default value : []
import {
  ApplicationRef,
  ComponentFactoryResolver,
  Injectable,
  TemplateRef,
  ViewContainerRef,
} from '@angular/core';
import { PopupHostComponent } from '../popup-host/popup-host.component';

/**
 * PopupService
 *
 * @export
 * @class PopupService
 */
@Injectable({
  providedIn: 'root',
})
export class PopupService {
  /**
   * The popups data collection
   * @private
   * @memberof PopupService
   */
  #popups: PopupData[] = [];

  /**
   * PopupHostComponent
   *
   * @private
   * @type {(PopupHostComponent | null)}
   * @memberof PopupService
   */
  private hostComponent: PopupHostComponent | null = null;

  /**
   * Creates an instance of PopupService.
   *
   * @param {ApplicationRef} appRef
   * @param {ComponentFactoryResolver} factoryResolver
   * @memberof PopupService
   */
  constructor(
    private appRef: ApplicationRef,
    private factoryResolver: ComponentFactoryResolver
  ) {}

  /**
   * Sets a new popup to the Host Popup Component
   *
   * @param {TemplateRef<any>} tr
   * @param {PopupRect} rect
   * @param {(boolean | undefined)} overlay
   * @memberof PopupService
   */
  set(tr: TemplateRef<any>, rect: PopupRect, overlay: boolean | undefined) {
    this.initializeHost();
    this.removeIfExists(tr);
    this.#popups.push({ tr, rect, overlay });
    /* istanbul ignore else */
    this.hostComponent?.update(this.#popups);
  }

  /**
   * Remove a popup from the host component
   *
   * @param {TemplateRef<any>} tr
   * @memberof PopupService
   */
  remove(tr: TemplateRef<any>) {
    this.removeIfExists(tr);
    /* istanbul ignore else */
    this.hostComponent?.update(this.#popups);
  }

  /**
   * Remove a previously registered instance of the popup element
   *
   * @private
   * @param {TemplateRef<any>} tr
   * @memberof PopupService
   */
  private removeIfExists(tr: TemplateRef<any>) {
    const i = this.#popups.findIndex((p) => p.tr === tr);
    /* istanbul ignore else */
    if (i >= 0) {
      this.#popups.splice(i, 1);
    }
  }

  /**
   * Initialize the popup host component
   *
   * @private
   * @return {*}
   * @memberof PopupService
   */
  /* istanbul ignore next */
  private initializeHost() {
    if (this.hostComponent) {
      return;
    }
    const root = this.appRef.components[0];
    const popupHostFactory =
      this.factoryResolver.resolveComponentFactory(PopupHostComponent);
    const rootViewContainer = root.injector.get(ViewContainerRef);
    const popupHostComponentRef = popupHostFactory.create(root.injector);
    rootViewContainer.insert(popupHostComponentRef.hostView);
    this.hostComponent = popupHostComponentRef.instance;
    this.hostComponent.update(this.#popups);
  }
}

export type PopupRect = {
  top?: number;
  left?: number;
  bottom?: number;
  right?: number;
  height?: number;
  width?: number;
  zIndex?: number;
};

export type PopupData = {
  readonly tr: TemplateRef<any>;
  readonly rect: PopupRect;
  readonly overlay: boolean;
};

result-matching ""

    No results matching ""