Message

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.

Returns void

appendTo

Appends the control within the given HTML element

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.

Returns void

Inject

Dynamically injects the required modules to the component.

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.