fusion-popup v0.0.9

Popup Fusion

Popup Fusion is a lightweight and customizable popup component for Angular, designed to provide a seamless and flexible modal experience.

Installation

npm install fusion-popup

Usage

Import the FusionPopupComponent in your Angular module:

import { PopupFusionModule } from "fusion-popup";

@NgModule({
  imports: [FusionPopupComponent],
})
export class AppModule {}

Use the <fusion-popup> component in your template:

<fusion-popup [visible]="isVisible" [title]="'My Popup'" [width]="'500px'" [height]="'400px'">
  <p>Popup content goes here.</p>
</fusion-popup>

API

Inputs

Events

Methods

Dynamic Open Mode

PopupFusionService

The PopupFusionService allows you to create popups dynamically without needing to define them in the template.

Importing the Service

import { PopupFusionService } from "fusion-popup";

Creating a Popup Dynamically

step 1: set the service FusionPopupService as Application provider

import { FusionPopupService } from 'fusion-popup';

@Component({
  selector: 'app-root',
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  providers: [FusionPopupService],
})

constructor(private popupService: PopupFusionService) {}

openPopup() {
  const popupInstance = this.popupService.createPopup({
    title: 'Dynamic Popup',
    width: '500px',
    height: '400px',
    component : YourComponent
  });
}

Closing a Popup

this.popupService.closePopup(popupInstance.id);

Example

open popup with service

import { Component } from "@angular/core";
import { PopupFusionService } from "fusion-popup";

@Component({
  selector: "app-root",
  template: ` <button (click)="openPopup()">Open Popup</button> `,
})
export class AppComponent {
  constructor(private popupService: PopupFusionService) {}

  openPopup() {
    this.popupService.createPopup({
      title: "Dynamic Popup",
      width: "500px",
      height: "400px",
    });
  }
}

Example

handle button click and close popup

import { Component } from "@angular/core";
import { PopupFusionService } from "fusion-popup";

@Component({
  selector: "app-root",
  template: ` <button (click)="openPopup()">Open Popup</button> `,
})
export class AppComponent {
  constructor(private popupService: PopupFusionService) {}

  openPopup() {
    const popup = this.popupFusionService.createPopup({
      width: "700px",
      height: "200px",
      positionXY: { x: 0, y: 0 },
      title: "Popup Title",
      component: AppComponent,
      buttons: [
        {
          id: "close",
          text: "Close",
          type: "info",
          stylingMode: "outlined",
        },
      ],
    });

    popup.onButtonClick.subscribe((event: FusionButtonClickEvent) => {
      if (event.button.id === "close") {
        // controle the buttons properties from event.button
        event.button.loading = true;
        // controle the buttons properties from popup.button
        popup.startButtonLoading("close");
        // controle the popup form event
        event.popup.close();

        // controle the component rendred from outside and access to all public properties and methods
        const rendredComponent = popp.getComponent<YourComponent>();
        // controle the popup from instance
        popup.close();
      }
    });
  }
}

License

MIT