Message

23 Sep 20254 minutes to read

The Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.

<div id="msg"></div>
<script>
  var msgObj: Message = new Message({
     content: 'Editing is restricted',
     showCloseIcon: true
  })
  msgObj.appendTo('#msg');
</script>

Properties

content string|Function

Specifies the content to be displayed in the Message component. It can be a paragraph, a list, or any other HTML element.

Defaults to null

cssClass string

Specifies the CSS class or multiple classes separated by space that can be appended to the root element of the Message component to customize the message.

Defaults to ’’

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

severity string|Severity

Specifies the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Success, Info, Warning, and Error.

Defaults to Severity.Normal

showCloseIcon boolean

Shows or hides the close icon in the Message component. An end user can click the close icon to hide the message. The closed event is triggered when the message is closed.

Defaults to false

showIcon boolean

Shows or hides the severity icon in the Message component. When set to true, the severity icon is displayed at the left edge of the Message component.
This icon will be distinctive based on the severity property.

Defaults to true

variant string|Variant

Specifies the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined, and Filled.

Defaults to Variant.Text

visible boolean

Shows or hides the visibility of the Message component. When set to false, the Message component will be hidden.

Defaults to true

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event
handler	Function	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	string | HTMLElement	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Method to destroy the Message component. It removes the component from the DOM and detaches all its bound events. It also removes the attributes and classes of the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getPersistData

Get the persisted state properties of the Message component.

Returns string

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event to remove
handler	Function	Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

Returns void

Events

closed EmitType<MessageCloseEventArgs>

Triggers when the Message component is closed successfully.

created EmitType<Object>

Triggers when the Message component is created successfully.

destroyed EmitType<Event>

Triggers when the Message component is destroyed successfully.