New to Kendo UI for AngularStart a free 30-day trial

Styling Angular Notification

The Notification component allows you to customize its visual appearance by adjusting its default dimensions and styling.

Setting Dimensions

By default, the width and height of the Notification fit the content. You can change the dimensions of the Notification by setting the height and width properties if the NotificationSettings.

The following example sets fixed width and height of the Notification.

Change Theme
Theme
Loading ...

Applying Custom Styles

You can further enhance the visual appearance of the Notification by applying one or more CSS classes to the cssClass property of the NotificationSettings. To apply CSS rules to the component, set the Angular encapsulation metadata to ViewEncapsulation.None.

The following example changes the default look and feel of the Notification using custom CSS classes.

Change Theme
Theme
Loading ...