angular2-callcomponent v0.1.3

angular2-callcomponent

Installation

To install this library, run:

$ npm install angular2-callcomponent --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install angular2-callcomponent

and inside component you want to render another component:

import {Component, ViewContainerRef} from "@angular/core";
// Import your library
import { CallComponentService } from 'angular2-callcomponent';

@Component({
    ...,
    providers: [CallComponentService]
})
export class YourComponentParent {
    constructor(private vcRef: ViewContainerRef, private callComponentServie: CallComponentService) {
        callComponentService.defaultViewContainer = vcRef;
    }
    
    showChildComponent(): void {
    	// Data to be injected in child component *Optional
    	let data = {foo: 'bar'};
        
        // Creating your component instance;
        let component = this.callComponentService.create(YourComponentChild, data);
        
        // If you want to show
        // You can put information here that will overlap with the previous ones. *Optional
        data = {hello: 'world'};
        let show = component.show(data);
        
        // If you want pick event when component is closed:
        let watch = show.watch().subscribe(close_response => {
            console.log(close_response); // {close: 'response'};
            watch.unsubscribe();
        })
        
        // If you want close your component
        show.close();
        
    }
}

YourChildComponent:

import {Component, ViewContainerRef} from "@angular/core";
// Import your library
import { CallComponentMetadata } from 'angular2-callcomponent';

@Component({
    ...
})
export class YourChildComponent implements CallComponentMetadata {
    call_close: EventEmitter<any>;
    call_input: any;
    
    constructor(){}
    
    ngOnInit() {
        // Data sended by create() or show();
        console.log(this.call_input); // {hello: "world"}
    }
    
    close() {
    	// Data will be sended to parent component;
        let close_response = {close: 'response'};
        this.call_close.emit(close_response);
    }
    
}

Your NgModule:

@NgModule({
  declarations: [
    ...
    YourParentComponent
    YourChildComponent
  ],
  entryComponents: [
  	...
    YourChildComponent // Here you need to declare the components that will be created.
  ],
  imports: [
    ...
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Murilo Parente