MediaSFU Angular
    Preparing search index...

    Class AlertComponent

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

    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

    Basic Usage:

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

    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>

    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>

    app-alert-component

    true

    CommonModule

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

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

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

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

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

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

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

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

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

    handlePress - Manually dismisses the alert by invoking onHide callback

    Implements

    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnChanges handlePress

    Properties

    visible message type duration textColor onHide alertStyle? customTemplate? alertType

    Constructors

    Methods

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    Properties

    visible: boolean = false
    message: string = ''
    type: "success" | "danger" = 'success'
    duration: number = 4000
    textColor: string = 'black'
    onHide: () => void
    alertStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    alertType: "success" | "danger" = 'success'

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties