Search code examples
angularangular6angular-toastr

Angular5-Toaster Dynamic component inject parameters


I am trying to create a dynamic template to display information from a dynamic component as listed in the NPM readme. https://www.npmjs.com/package/angular5-toaster

Example:

import {BodyOutputType} from 'angular5-toaster';

@Component({
  selector: 'dynamic-component',
  template: `<div>loaded via component</div>`
})
class DynamicComponent { }

var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: DynamicComponent,
    bodyOutputType: BodyOutputType.Component
};
      
this.toasterService.pop(toast);

My question is how would I pass parameters into the DynamicComponent.


Solution

  • I would suggest to share the data using Angular Service.

    Step 1 : set the data want to pass in to the dynamic component before you load the Toast.

        this.someService.data="some parameter"
        this.toasterService.pop(toast);
    

    Step 2 : Once the component initialize you can read the value by injecting the service as a dependency on your dynamic component.

    ngOnInit(){
    //read the data
    console.log(this.someService.data)
    }