@talenra/components documentation
  1. Components
  2. MessageComponent

File

message/src/message/message.component.ts

Description

Displays a user message with an icon and a text. Comes in diferent flavours, sizes and styles.

  • Level: success, error, warning and info (default)
  • Size: s and m (default)
  • Kind: default (default) and ghost (transparent background)

Basic usage:

Example :
<talenra-message text="My user message"></talenra-message>

Formatted content:

Example :
<talenra-message level="success"><strong>Congrats!</strong> You made it.</talenra-message>

Import

Example :
import { MessageComponent } from '@talenra/components/message';

../../../#/message

Implements

OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-message
imports IconComponent ButtonComponent CopyContentButtonComponent
styleUrls ./message.component.scss
templateUrl ./message.component.html

Index

Inputs
Outputs

Inputs

description
Type : string
Default value : ''

Optional description displayed in accordion. Description is hidden by default and can by expanded by the user. It is typically used to give the user extra information. Use description to keep the message text concise without compromising content.

Example :
<talenra-message text="My message" description="My user-expandable description."></talenra-message>
dismissible
Default value : false, { transform: booleanAttribute }

Determines whether Message can be dismissed by the user. If set, the close button is shown.

Example :
<talenra-message text="My message" dismissible></talenra-message>
identifier
Type : string
Default value : ''

Unique identifier provided by the parent component. Used to track the message in environments with multiple Message instances.

If you rely on a single/static Message instance or if you do not allow users do dismiss messages (using the dismissible input property) you might not need an identifier.
kind
Type : TMessageKind
Default value : MessageKind.Default

Kind of the message displayed. Determinates the style of the Message.

Example :
<talenra-message text="My message" kind="ghost"></talenra-message>
level
Type : TMessageLevel
Default value : MessageLevel.Info

Defines the message level: info (default), error, success or warning.

Example :
<talenra-message text="My message" level="success"></talenra-message>
size
Type : TMessageSize
Default value : MessageSize.M

Size of the message displayed.

Example :
<talenra-message text="My message" size="s"></talenra-message>
text
Type : string
Default value : ''

Message text displayed to the user.

Example :
<talenra-message text="My message"></talenra-message>

Outputs

removeMessage
Type : MessageRemove

Event emitted when Message is removed. Removal is triggered if the user dismisses the message, after the fade-out animation is completed.

Returns a reference to the emitting Message instance and its identifier (if provided).

Example :
<talenra-message [identifier]="message.identifier" [text]="message.text" (removed)="onRemoved($event)"></talenra-message>

See MessageRemove

results matching ""

    No results matching ""