How to show 2 separated toasters in 2 components

Question

I'm trying to use 2 separated angular2-toasters for alerting 2 kinds of notifications. Currently - I can't separate between them - meaning - whenever each of the 2 types alerts are triggered - 2 notifications appears. There are 2 components- 1 is contained in another, and each of them has toaster container. The main difference between the 2 toasters is that the toaster in the main component doesn't have any toasterId because I may have several instances of this toaster at the same time, while the toaster in the inner component has toasterId.

Please ignore any typos - the code is free handed written - not copied.

See my code: main component Html: (the second toaster is located in the app-innerComp)

<toaster-container class="my-toaster-container" [toasterconfig]="toasterconfigForMainComponent"></toaster-container>
<app-innerComp></app-innerComp>

main component:

export class mainComponent
{
    constructor(private toasterService : ToasterService){}
    toasterconfigForMainComponent: ToasterConfig = new ToasterConfig({
            positionClass: 'toast-bottom-left',
            showCloseButton: true,
            tapToDismiss: false,
            preventDuplicates: true
        })
    popAlertForMainComponent()
    {
        let mainComponentToaster : Toast =  //Here I don't have toasterId on purpose because I may have few instances of this toaster on the same time
        { 
            type: "error",
            title: "outer component Alert",
            body: <some component as body>,
            timeout:<some variable>, 
            data: <some object>,
            toastContainerId: 2
        }
        let toastObject = Object.create(mainComponentToaster);
        this.toasterService.pop(toastObject);
    }
    
}       

inner component html:

<toaster-container class="my-toaster-container" [toasterconfig]="toasterconfigForInnerComponent"></toaster-container>

inner component:

    @Component(
    {
        selector: 'app-innerComp'...
    })
    
    export class InnerComponent
    {
        toasterconfigForInnerComponent: ToasterConfig = new ToasterConfig({
            positionClass: 'toast-top-left',
            showCloseButton: true,
            tapToDismiss: false,
            preventDuplicates: true
        })
        
        constructor(private toasterService : ToasterService){}
        
        popAlertForInnerComponent()
        {
            let innerComponentToaster : Toast = 
            {
                toastId: "innerComonentToaster",
                type: "error",
                title: "inner component Alert",
                timeout:0,
                toastContainerId : 1
            }
            let toastObject = Object.create(innerComponentToaster);
            this.toasterService.pop(toastObject);
            
        }
    }
}
    






    
    

Answer 1

You have identified the target container that you want each toast to be displayed in, but you haven't mirrored that toastContainerId in each container's respective ToasterConfig instance.

export class mainComponent
{
    constructor(private toasterService : ToasterService){}
    toasterconfigForMainComponent: ToasterConfig = new ToasterConfig({
            positionClass: 'toast-bottom-left',
            showCloseButton: true,
            tapToDismiss: false,
            preventDuplicates: true,
            toastContainerId: 2
        })
    ...

export class InnerComponent
{
    toasterconfigForInnerComponent: ToasterConfig = new ToasterConfig({
        positionClass: 'toast-top-left',
        showCloseButton: true,
        tapToDismiss: false,
        preventDuplicates: true,
        toastContainerId: 1
    })
    ...

This allows you to target each container individually.

---

When you have provided explicit toastContainerIds, you can also still target all containers by omitting the toastContainerId property from your toast:

let multiContainerToast : Toast = 
{
    toastId: "innerComonentToaster",
    type: "error",
    title: "inner component Alert",
    timeout:0
}