ngx-pops
is a framework for easily rendering your own dynamic components (for example notifications) using ComponentFactoryResolver
and component class inheritance.
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) {}
}
doPop(component, data): void
function
Creates a new component to be rendered inside container. Takes a component class and a data object to bind to the component instance.
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.
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 toundefined
duration
number
Component lifetime in ms. Used by autoHide() as a default value. Can be manipulated globally using the[duration]
input on the PopsContainer, or locally viasuper.duration
(in which case make sure you set this value before you callsuper.autoHide()
. Defaults to3000
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. IfbeforeDestroyFunction()
is specified, it will call that function and wait for the promise to resolve before triggering thedestroy
event.
destroy
Output: EventEmitter<any>
The destroy event emits after beforeDestroyFunction() resolves (if it exists) and triggers destruction of the component
duration
number
Optional: Globally set time in ms after which autoHide() completes
This project is licensed under the MIT License - see the LICENSE.md file for details