jqwidgets-scripts-custom/demos/Angular/notification/defaultfunctionality/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<!--Notifications-->
<jqxNotification [theme]="'material'" #msgNotification
                 [width]="250" [position]="'top-right'" [opacity]="0.9" [autoOpen]="false"
                 [autoClose]="true" [animationOpenDelay]="800" [autoCloseDelay]="3000" [template]="'info'">
  <div>
    Welcome to our website.
  </div>
</jqxNotification>
<jqxNotification [theme]="'material'" #timeNotification
                 [width]="250" [position]="'top-right'" [opacity]="0.9" [autoOpen]="false"
                 [autoClose]="true" [animationOpenDelay]="800" [autoCloseDelay]="3000" [template]="'time'">
  <div>Current time: <span id="currentTime" style="font-weight: bold;"></span>.</div>
</jqxNotification>
<!--Layout-->
<jqxButton [theme]="'material'" [width]="230" [height]="30" (onClick)="onClickOpenMessageNotification()">
  Open a message notification
</jqxButton>
<br /><br />
<jqxButton [theme]="'material'" [width]="230" [height]="30" (onClick)="onClickOpenTimeNotification()">
  Open a current time notification
</jqxButton>