Class AlertComponent

AlertComponent - Toast-style notification component for success and error messages

Component

Description

Displays toast-style alert messages with automatic dismiss timer and manual close option. Supports three levels of customization:

  1. Basic Usage: Use default alert styles with custom message and type
  2. Style Customization: Override alert appearance with alertStyle prop
  3. Full Override: Provide a custom template via customTemplate for complete control

Key Features:

  • Auto-dismiss with configurable duration
  • Success/danger type indicators
  • Manual dismiss capability
  • Customizable text color and styling
  • Full template override support

Example

Basic Usage:

<app-alert-component
  [visible]="showAlert"
  [message]="'Operation completed successfully!'"
  [type]="'success'"
  [duration]="5000"
  [onHide]="handleAlertClose">
</app-alert-component>

Example

Style Customization:

<app-alert-component
  [visible]="showError"
  [message]="'An error occurred'"
  [type]="'danger'"
  [textColor]="'white'"
  [alertStyle]="{
    backgroundColor: '#dc3545',
    border: '2px solid #c82333',
    borderRadius: '8px',
    padding: '15px 20px'
  }"
  [onHide]="handleErrorClose">
</app-alert-component>

Example

Custom Template Override:

<app-alert-component
  [visible]="showAlert"
  [message]="alertMessage"
  [type]="alertType"
  [customTemplate]="customAlertTemplate"
  [onHide]="handleAlertClose">
</app-alert-component>

<ng-template #customAlertTemplate let-visible="visible" let-message="message" let-type="type">
  <div class="custom-alert" [class.success]="type === 'success'" [class.danger]="type === 'danger'">
    <i [class]="type === 'success' ? 'fa fa-check-circle' : 'fa fa-exclamation-triangle'"></i>
    <span>{{ message }}</span>
    <button (click)="handleAlertClose()">×</button>
  </div>
</ng-template>

Selector

app-alert-component

Standalone

true

Imports

CommonModule

Input

visible - Whether the alert is currently visible. Default: false

Input

message - The message text to display in the alert. Default: ''

Input

type - Alert type ('success' or 'danger') affecting color scheme. Default: 'success'

Input

duration - Auto-dismiss duration in milliseconds. Default: 4000

Input

textColor - Color of the message text. Default: 'black'

Input

onHide - Callback function invoked when alert is dismissed (auto or manual). Default: undefined

Input

alertStyle - Custom CSS styles to apply to the alert container. Default: undefined

Input

customTemplate - Custom TemplateRef to completely replace default alert template. Default: undefined

Method

ngOnChanges - Handles input changes and triggers auto-dismiss timer when visible

Method

handlePress - Manually dismisses the alert by invoking onHide callback

Implements

  • OnChanges

Constructors

constructor

Methods

ngOnChanges handlePress

Properties

visible message type duration textColor onHide alertStyle? customTemplate? alertType

Constructors

constructor

Methods

ngOnChanges

handlePress

Properties

visible

visible: boolean = false

message

message: string = ''

type

type: "success" | "danger" = 'success'

duration

duration: number = 4000

textColor

textColor: string = 'black'

onHide

onHide: (() => void)

OptionalalertStyle

alertStyle?: Partial<CSSStyleDeclaration>

OptionalcustomTemplate

customTemplate?: TemplateRef<any>

alertType

alertType: "success" | "danger" = 'success'

Settings

Member Visibility

On This Page

Constructors
Methods
Properties