Sets or gets the appendContainer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [appendContainer]="'#container'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [autoOpen]="true">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationOpenDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [animationOpenDelay]="600">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationCloseDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [animationCloseDelay]="1000">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoClose property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [autoClose]="true">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoCloseDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [autoCloseDelay]="5000">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the blink property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [blink]="true">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the browserBoundsOffset property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [browserBoundsOffset]="10">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeOnClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [closeOnClick]="false">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [disabled]="true">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [height]="200">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the hoverOpacity property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [hoverOpacity]="2">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

interface NotificationIcon {
     width?: String | Number;
     height?: String | Number;
     url?: String;
     padding?: String | Number;
}

Sets or gets the icon property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [icon]="icon">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the notificationOffset property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [notificationOffset]="10">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the opacity property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [opacity]="1">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

enum NotificationPosition {
     top-left,
     top-right,
     bottom-left,
     bottom-right
}

Sets or gets the position property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [position]="'top-left'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [rtl]="true">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showCloseButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [showCloseButton]="false">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

enum NotificationTemplate {
     info,
     warning,
     success,
     error,
     mail,
     time,
     null
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [template]="'info'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'" [theme]="'energyblue'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the notification is closed.

Code examples

Bind to the close event of jqxNotification.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification (onClose)="Close($event)"
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the notification is clicked.

Code examples

Bind to the click event of jqxNotification.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification (onClick)="Click($event)"
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    Click(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the notification is opened.

Code examples

Bind to the open event of jqxNotification.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification (onOpen)="Open($event)"
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNotification') myNotification: jqxNotificationComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myNotification.closeAll();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNotification') myNotification: jqxNotificationComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myNotification.closeLast();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNotification') myNotification: jqxNotificationComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myNotification.destroy();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNotification') myNotification: jqxNotificationComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myNotification.open();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNotification') myNotification: jqxNotificationComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myNotification.refresh();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNotification #myNotification 
            [width]="250" [position]="'top-right'">
            <div>
                Welcome to our website.
            </div>
        </jqxNotification>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNotification') myNotification: jqxNotificationComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myNotification.render();
    }

    
}