Description:

The sdk-message component is an easy "toaster-like" messaging component that allows you to provide feedback to users.

Angular Compatibility Chart

| Version | Compatibility | |---------|---------------| | >= 16 | ✔ |

NOTE: This package leverages the sdk-core-library for core configurations (i.e., colors, icons, etc.).

INSTALLATION:

Using NPM:

npm install --save sdk-message

CONFIGURATION:

To configure the sdk-message for your application, add the following lines to your app.module.ts file:

import { SDKMessageModule } from 'sdk-message';

@NgModule({
    imports: [
        SDKMessageModule
    ]
})
export class AppModule { }

PROPERTIES:

message: string = ""; // Message to display.
height: string = ""; // Height of the message box. Default value is "35px".
style: string = ""; // Custom style to apply to message. Default value includes blue background with white font.
timer: number = 5; // Time (in seconds) to display the message. Default value is shown.

USAGE:

<sdk-message [(message)]="message"></sdk-message>

<sdk-message [(message)]="message" height="50px"></sdk-message>

<sdk-message [(message)]="message" style="height: 50px;"></sdk-message>

<sdk-message [(message)]="message" style="color: red; background-color: yellow;" [timer]=10></sdk-message>

NOTE: The sdk-message component clears the calling 'message' property be default. This is the reason for the required two-way binding [(message)].

The message will remain on the screen for the "timer" amount. If you click the message, it will close. If you move your mouse over the message, it will pause until you move your mouse away - at which point the timer (countdown) will begin again.