Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngx-dynamic-modal

ogrinishin5MIT0.1.9TypeScript support: included

Simple creating of modal from any (REALLY ANY) component

angular, angular5, angular6, angular4, dynamic component, modal, dialog

readme

Angular dynamic modal

Simple creating of modal from any (REALLY ANY) component

Installation

npm install ngx-dynamic-modal --save

Usage

Angular 2+

Module with needed parent component

import {ModalModule} from 'ngx-dynamic-modal';
@NgModule({
    imports: [ModalModule]
})
export class AppModule{};

Parent component

import {ModalService} from 'ngx-dynamic-modal';
import {ChildComponent} from './child-component';

@Component({
    //...
})
export class ParentComponent {
    constructor(private modalService: ModalService) {}

    callback(res) {
        console.log(res)
    }

    openModal() {
        const data = {a: 1, b: 2};
        this.modalService.addDynamicComponent(ChildComponent, {data}, (res) => {
            this.callback(res)
        })
    }
};

Child component

import {ModalComponent} from 'ngx-dynamic-modal';

@Component({
    //...
})
export class ChildComponent extends ModalExtended implements OnInit {

    constructor(){
        super();
    }

    ngOnInit() {
        //get data
        console.log(this.data); //{a: 1, b: 2}
    }

    onExit(){
        //to run callback
        this.applyCallback('any data');
        //to destroy modal component
        this.close();
    }
};