Nagging Mario's Princess

    ngspawn
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    NgSpawnService

    This is an Angular/TypeScript service that will dynamically create components in Angular, and attach them to a view.

    The current version of this repo supports installing NgSpawnService into your project via npm, and using the service to init your own components on-the-fly.

    To learn more about NgSpawnService

    If you want to know more about NgSpawnService, or you need to understand the need for the service, please check out my talk about CAAS: Components As A Service.

    How to use NgSpawnService?

    Install

    npm install --save Ngspawnservice

    Import

    import { NgSpawnService } from 'ngspawnservice'

    Inject

    In a component/module/service file, you will want to inject the NgSpawnService

    @Component({
       selector: 'my-component',
       templateUrl: './my-component.html'
    })
    export class MyComponent{
     
       //Inject it into your component or service    
       constructor(private spawnService: NgSpawnService){}
     
    }

    Add to appModule.entryComponents

    In order to be able to spawn a component like this, you have to tell Angular that this component is an entryComponent. This means that it isn't a child component of any other components. It is a top-level component. If you don't do this, you can't dynamically create the component with NgSpawnService.

    Here is how you do this:

    @NgModule({
        ...              //  ▼▼▼ By adding your component to the entryComponents, it is now ready to be spawned dynamically 
        entryComponents[ FooComponent ]
        ...
    })
    export class AppModule{}

    Spawning a component

    First import the component class that you want to spawn, and then call the spawn service, and pass in the class to it.

    Note: that since there was no second parameter provided, the spawned component will be attached to the document.body

    import { FooComponent } from '...somewhere'
     
    //inside the class
    export class AppComponent{
      
        constructor(private spawnService: NgSpawnService){}
        
        // This is where you spawn the FooComponent
        showFooComponent(){
            let context = {title: 'Brocchi Rocks'};
            let spawnRef = this.spawnService.createComponent(FooComponent);
        }
    }

    Providing a ViewContainerRef

    If you provide a second argument, and that second argument is a ViewContainerRef, then NgSpawnService will attach the spawned component to the provided ViewContainerRef.

    In order to get access to a ViewContainerRef, you can add a Template Reference Variable to your template on the element that you would like to append the spawned component to. Then in your class, you can get access to that part of the template by annotating your class like so:

    export class AppComponent{  
        // Name your ViewContainerRef
        @ViewChild('temprefvar', {read: ViewContainerRef})
      
        constructor(private spawnService: NgSpawnService){}
        
        // AND NOW PASS THAT IN HERE
        showFooComponent(){
            let context = {title: 'Brocchi Rocks'};
            let spawnRef = this.spawnService.createComponent(FooComponent, this.temprefvar);
        }
    }

    This will attach the spawned component to to view that you provided.

    Passing Inputs and Outputs

    There are two ways to pass inputs/outputs to the spawned component. The first is by passing a key/value object as the third parameter to the createComponent method.

    The second way is by saving the result of the createComponent call, and then call .next() on it with a key/value object. The keys needs to match the names of the inputs and outputs.

    //First way                                                     ||| HERE |||                                           
    this.spawnService.createComponent(FooComponent, this.temprefvar, {title: "HELLO WORLD"})
     
    //Second Way
    let spawnRef = this.spawnService.createComponent(FooComponent, this.temprefvar);
    spawnRef.next({title: "HELLO WORLD"});

    You can call .next() on the spawnReference as often as you would like. It will continue to update the values on your spawned component. Let me know if you have questions.

    If there are any questions, please file an issue.


    Contributing

    This Repo is accepting Pull Requests.

    This project was generated with Angular CLI version 1.0.2.

    Install

    npm i ngspawn

    DownloadsWeekly Downloads

    6

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • aaronfrost