Toasts alongside messages in primeng-CodePudding

Is there a way to use two messageServices in one component using primeng? My problem is that I need to display toasts and messages depending on error type in my app, and I just can't find a working solution for this. Every time a message is added to messageService in component it is being displayed both as a message and a toast.

I tried creating two services for toast and messages like so:

export class ToastInformationService {

  constructor(
    private messageService: MessageService
  ) { }

  pushInformation(message: string): void {
    this.messageService.add({
      detail: message
    });
  };
}

And then using it in a component

export class HeaderComponent implements OnInit {

  informations: string[] = [];

  constructor(
    private informationService: InformationService,
    private toastInformationsService: ToastInformationService,
  ) { }

  ngOnInit(): void { }

  sendMessage(message: string): void {
    this.informationService.pushInformation(message);
  }

  showToast(message: string): void {
    this.toastInformationsService.pushInformation(this, message);
  }
}

CodePudding user response：

Updated to add some detail & clarity.

It's not immediately clear from the documentation that you can achieve this but since the Toast and Message both use the MessageService you need to use the key property to indicate which component you are targeting.

From the "Targeting Messages" section of the "Toast" documentation (Toast)

A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the key property so that toast and the message can match.

From the "Message Service" section of the "Messages" documentation (emphasis added) Messages

MessageService alternative does not require a value binding to an array. In order to use this service, import the class and define it as a provider in a component higher up in the component tree such as application instance itself so that descandant components can have it injected. If there are multiple message components having the same message service, you may use key property of the component to match the key of the message to implement scoping.

Example:

<p-toast key="myKey1"></p-toast>
<p-toast key="myKey2"></p-toast>

this.messageService.add({key: 'myKey1', severity:'success', summary: 'Summary Text', detail: 'Detail Text'});
this.messageService.add({key: 'myKey2', severity:'success', summary: 'Summary Text', detail: 'Detail Text'});

In your case you'd need to update your HTML and the pushInformation(message: string): to have a key parameter.

<p-toast key="myToast"></p-toast>
<p-message key="myMessage"></p-toast>

this.informationService.pushInformation(message, "myToast"); // Toast
this.informationService.pushInformation(message, "myMessage"); // Message

pushInformation(message: string, key: string): void {
  this.messageService.add({
    detail: message,
    key: key
  });
};

Make sure you have imported the MessageService into your module etc.:

import { MessageService } from 'primeng/api';
import { MessagesModule } from 'primeng/messages'; // p-messages component
import { ToastModule } from 'primeng/toast'; // p-toast component