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);
            
        }
    }
}

David L · Accepted Answer · 2021-01-06T14:47:12.720

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
}

How to show 2 separated toasters in 2 components

1 Answers1