🤩
Windframe Import Update is finally here.

Notification

Angular Bootstrap Notification

Angular Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Importing the Contrast Angular Bootstrap Notification Module

To use the Contrast Angular Bootstrap Notification component in your project you need to import NotificationModule.

typescript
import {NotificationModule } from 'cdbangular';

Custom Notification Types

The Contrast Angular Bootstrap Notification takes a couple of parameters. The [show] parameter allows your notification component to be visible, the [fade] parameter gives the notification component a fade animation when it leaves your screen.

To change the icon's color in your notification, we give our CDBNotification component an iconClassName prop with a text value, then append the color we want it to have (e.g., primary, secondary, etc.). For example iconClassName= "text-primary.

Use the title prop for your notification title, message and texts prop for writing information.

Angular Bootstrap Notification Custom

html
html
<CDBNotification [show]=true [fade]=true [autohide]='2' title="Contrast" message="Hello, world! This is a primary message."
text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true iconClassName="text-primary" title="Contrast"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true iconClassName="text-secondary" title="Contrast"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>

Notification with Hidden Message

Angular Bootstrap Notification with Hidden Message

html
html
<CDBNotification [show]=true [fade]=true [hideMessages]=true [autohide]='5' title="Contrast"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true [hideMessages]=true iconClassName="text-success" title="Contrast"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true [hideMessages]=true iconClassName="text-warning" title="Contrast"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>

Icon Box

Angular Bootstrap Notification

html
html
<CDBNotification [show]=true [fade]=true color="success" title="Contrast" message="Hello, world! This is a primary message."
text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true color="danger" title="Contrast" message="Hello, world! This is a primary message."
text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true color="secondary" title="Contrast" message="Hello, world! This is a primary message."
text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true color="primary" title="Contrast" message="Hello, world! This is a primary message."
text="11 mins ago" ></CDBNotification>

Notification with Icons

The Contrast Angular Bootstrap Notification component allows you to change the icon on your notification. To do that, use the icon prop.

Angular Bootstrap Notifications with Icons

html
html
<CDBNotification [show]=true [fade]=true title="Contrast" icon="award" message="Hello, world! This is a primary message."
text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true iconClassName="text-primary" title="Contrast" icon="bus"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true iconClassName="text-danger" title="Contrast" icon="burn"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>
<CDBNotification [show]=true [fade]=true iconClassName="text-success" icon="car-crash" title="Contrast"
message="Hello, world! This is a primary message." text="11 mins ago" ></CDBNotification>

Positioning

The position property indicates where on the website you want the notification to be.

Angular Bootstrap Notification Positioning

html
html
<CDBNotification [show]=true [fade]=true title="Contrast" message="Hello, world! This is a positioned notification."
text="11 mins ago" position="top-left" ></CDBNotification>
<CDBNotification [show]=true [fade]=true title="Contrast" message="Hello, world! This is a positioned notification."
text="11 mins ago" position="bottom-right" ></CDBNotification>

Contrast Angular Bootstrap Notification Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Notification component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBNotification component.

NameTypeDefaultDescriptionExample
bodyClassNameStringAdds custom className to the body section of notification componentbodyClassName="p-5 font-weight-bold"
bodyColorStringSet color to the body section of notification componentbodyColor="black"
ClassStringAdds custom classes to the wrapperClass="stylish-color-dark"
closeClassNameStringtext-darkAdds custom classes to the Close buttoncloseClassName="blue-grey-text"
fadeBooleanfalseAdds a fade effect when you close the notificationfade=true
hideMessagesBooleanfalseHides messages in the componenthideMessages=true
autohideNumberSets time in ms when box hide. 0 = infinityautoHide=3000
iconStringsquareSets a custom iconicon="bell"
iconClassNameStringAdds custom classes to the IconiconClassName="green-text"
messageStringSets message of the notificationmessage="Hello there! This is a toast message"
positionStringOne of top-right, top-center, top-left, bottom-right, bottom-center, bottom-leftposition="top-right"
showBooleantrueShows your component. If you do not use this setting, your component will exist, but it will be hidden.show=false
textStringSets text of the notificationtext="11 minutes ago"
titleStringSet header text of the notificationtitle="Someone sent you an email"
titleClassNameStringAdds custom classes to the title texttitleClassName="elegant-color-dark-white-text"
titleColorStringSets the color of the titletitleColor="white"

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast