angular 4 component target by selector

Question

I'm developing a message system, based on toaster notifications:

http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications

My question is simple, I want to extend the functionality to allow multiple alert components that can be targeted individually within different templates.

For example, the root app.component.html template would have:

<alert root></alert>

A sub component would have:

<alert subcomponent></alert>

The current implementation of the toaster tutorial (component) will target any instance of the alert component within a template.

If there were two, they would both get the same message when the service is invoked.

Ideally, I want to add another parameter onto the service call:

this.alertService.success(message,target);

Answer 1

you can use an string input attribute in the alert directive component called target.

and when the alert.service trigger an alert the component only shows if the target match:

alert.component.ts

// add this input
@Input() target: string;

ngOnInit() {
    this.alertService.getAlert().subscribe((alert: Alert) => {
        // add this statament
        if (alert.target === this.target) {
            this.alerts.push(alert); 
        }
    });
}

alert.service.ts

/*each alert function recive an extra parameter for target, if you needed with a default value, "root" for example*/

root.component.html

<alert target='root'></alert>

other.component.ts

// calling an alert
this.alertService.success(
    message='operation success', 
    target='root'
)