Ngx-pops NPM | npm.io

ngx-pops

ngx-pops is a framework for easily rendering your own dynamic components (for example notifications) using ComponentFactoryResolver and component class inheritance.

Demo: Link

Installation

Install the module:

npm i ngx-pops

Import the module:

// app.module.ts

import { NgxPopsModule } from 'ngx-pops';

Import components to render:

import { BalloonComponent } from './balloon.component';

Add both to declarations and imports:

@NgModule({    
    declarations: [BalloonComponent],    
    imports: [
        NgxPopsModule.withComponents([
            BalloonComponent
        ])
    ]
})

Create a component to render:

// balloon.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { PopComponent } from 'ngx-pops';
    
@Component({    
    template: `    
        <div class="balloon" (click)="needle()">
            {{ id }}
            {{ data.message }}
        </div>    
    `    
})    

export class BalloonComponent extends PopComponent implements OnInit {  
                    
    constructor() {    
        super();
    }
    
    ngOnInit() {
        // optional: enable automatic destruction
        super.autoHide();
    }
   
    needle() {
        // manually destroy component
        super.destroyComponent();
    }
}

Inside the container component:

// container.component.ts

import { Component } from  '@angular/core';
import { PopsService } from  'ngx-pops';    
import { BalloonComponent } from  './balloon.component';

@Component({    
    selector: 'my-container',    
    template: `    
        <button (click)="pops.doPop(balloonComponent, { message: 'I am a balloon' })">
            Balloon
        </button>
        <pops-container [duration]="3000"></pops-container>
    `    
})

export class ContainerComponent {

    balloonComponent = BalloonComponent;
    
    constructor(public pops: PopsService) {}	
        
}

API

PopService

doPop(component, data, target): void

function Creates a new component to be rendered inside container. Takes a component class, a data object to bind to the component instance, and an optional target to specify in which container to render the new component.

getPopStream(): Observable<Pop>

function Returns an observable stream of the latest pop created.

clearPops(): void

Function Destroys all components in the view.

getFnEventStream(): Observable<string>

function Returns observable stream of function events.

PopComponent

This class is accessible through super() when using component inheritance, e.g.:

export class MyComponent extends PopComponent {

    constructor() {
        super();
    }
    
    log() {
        console.log(super.data);
    }

}

data

any Data object to bind to the component instance. Defaults to undefined

setDuration(ms): void

function Set component lifetime in ms (defaults to 3000). Used by autoHide() as a default value. Can be manipulated globally using the [duration] input on the PopsContainer, or locally using setDuration(), in which case make sure you set this value before you call super.autoHide().

autoHide(duration): void

function Triggers a timer that will complete and then trigger destroyComponent() after specified duration. Defaults to global duration.

setBeforeDestroy(func: () => Promise<void>): void

function Sets value of beforeDestroyFunction. Takes a Promise-returning function to perform logic before the component is destroyed. Useful for performing UI logic (e.g. css animations) that needs to be executed before the component is removed from the DOM.

destroyComponent(): void

function Triggers component destruction. If beforeDestroyFunction() is specified, it will call that function and wait for the promise to resolve before triggering the destroy event.

destroy

Output: EventEmitter<any> The destroy event emits after beforeDestroyFunction() resolves (if it exists) and triggers destruction of the component

PopContainer

duration

number Optional: Globally set time in ms after which autoHide() completes
containerLabel Optional: Set unique container label to use multiple containers in conjunction with each other. Defaults to 'default'