OneCX PortalMessageService

This service provides a convenient way to display translated toast messages in an Angular application. It is available via @onecx/angular-integration-interface

Overview

This document will focus on how to:

  • use PortalMessageService to display toast messages.

  • customize toast messages.

Usage

To use the PortalMessageService, inject it into your component or service:

import { PortalMessageService } from '@onecx/angular-integration-interface'

constructor(private portalMessageService: PortalMessageService) {}

Then, call one of the following methods to display a toast message:

  • success(msg: Message)

  • info(msg: Message)

  • error(msg: Message)

  • warning(msg: Message)

Each method accepts a Message object that can include translation keys and parameters.

Example

this.portalMessageService.success({
    summaryKey: 'SUCCESS.TITLE',
    detailKey: 'SUCCESS.DETAIL',
    summaryParameters: { name: 'User' },
    detailParameters: { action: 'saved' },
    life: 5000,
    sticky: false,
    closable: true
});

This will display a success toast with translated summary and detail messages.

Customizing Messages

The Message type supports the following optional properties for customization:

Property name Type Description

summaryKey

string

Translation key for the summary (title) of the message.

summaryParameters

object

Parameters to be used with the summary translation key.

detailKey

string

Translation key for the detail (body) of the message.

detailParameters

object

Parameters to be used with the detail translation key.

id

any

Optional identifier for the message.

key

string

Optional key for message tracking or grouping.

life

number

Duration in milliseconds before the toast disappears.

sticky

boolean

If true, the toast will not disappear automatically.

closable

boolean

If true, the toast will include a close button.

data

any

Additional data to associate with the message.

icon

string

Custom icon to display with the toast.

contentStyleClass

string

CSS class to apply to the content area of the toast.

styleClass

string

CSS class to apply to the entire toast.