Source Code: github.com/sha...
Complete Playlist: • Web Application Develo...
In this part, we will implement a custom message #notification popup, using the #angular #material #snackbar component. We will start from basic snackbar to styled snackbar.
Closed Captioning:
We will write a function 'showNotification', which displays the material snackbar with error message.
Using the 'snackBar' class instance, we can call the 'open' function which displays a simple snackbar.
We can pass the display message as the first parameter.
Button text as the second parameter.
And if required, we can also pass the snack bar configuration object as the third parameter.
Some of the configuration parameters are,
'duration' which should given in milliseconds. To display the snack bar for 5 seconds, we must specify duration as 5000.
'horizontalPosition' which specifies the position of snack bar horizontally.
'verticalPosition' which specifies the position of snack bar vertically.
Now open the home component.
Inject the notifier service in constructor.
We will comment the alert statement which was used to display in case of an error.
Press Ctrl + '/' to comment the code.
Here we will call the 'showNotification' function.
Let's save the files and see what happens in case of an error.
A simple notification is displayed.
Let's make some changes to the 'showNotification' function, to pass the display message and button text from component itself.
Go to 'showNotification' function.
Here we will add two parameters for display message and button text.
These values will be passed to the snack bar, instead of the hard coded values.
Now let's update the function call accordingly.
We will pass the error message and button text.
The snack bar notification is working as expected.
Now let's change the look and feel of notification pop up as desired.
For that, instead of the 'open' function of SnackBar class, we must use 'openFromComponent' function and pass a component as the first parameter.
The passed component will be displayed as the snack bar pop up.
Let's create a component for the snack bar.
Open the HTML file, and we will do the desired design.
Let's run the application.
The component is getting displayed as the notification.
Now, we need to pass the message and button text to the component.
For that, first inject the 'MAT_SNACK_BAR_DATA' token to the component.
The variable name should be 'data'.
We need to pass the required data through the snack bar configuration.
Let's pass it as 'message' and 'buttonText'.
Now open the notifier HTML file, and display the injected data using interpolation.
Let's see the output.
The notification is displayed as expected, but clicking on the button is not closing the notification.
For that, we must create a reference to the snack bar in constructor.
And using this variable, the 'dismiss' method must be called from the click event of button.
It's working as expected.
Next, we will add some color to the snack bar.
For adding custom styling, we need to provide 'panelClass' for the snack bar.
We will name the panelClass 'error'.
Combining the same class name, we must now add a styling for the class 'mat-snack-bar-container' in the global styles.css file.
We will specify the background color as red, and font color as white.
Save all files, and run the app.
One more thing we can do is, we can change the color of notification occasionally.
For that, We will pass one more parameter 'messageType' to the function, which can be either 'error' or 'success'.
And we will be feeding this as the panelClass configuration.
Since we have styling defined for error, let's create one for 'success' in style.css file.
Also, we will pass the type of message as a data to the component.
This can be used to display the title of notification.
We can add the 'titlecase' pipe to capitalize the first letter.
Now, in case of an error, we will display error type notification.
And in case of successful loading of cards, we will display success type notification.
Let's see the output.
In case of error, red card is displayed.
In case of success, green card is displayed.
As a final touch, we can add some styling to the notification main content.
For that, we will just remove the 'duration' for time being, so that the notification stays on the screen for long.
Press F12 key to open developer tools in chrome.
Here we will use the element selector tool to select the target content.
Let's try adding styles and see the result real-time.
This looks good, so i am copying all these styles.
In the notifier components CSS file, i will create a class and add the styles.
Let me add this class to the div.
Perfect Notification.
In the next video, we will see how to add dark theme option to our project.
Негізгі бет Stylized custom notification in Angular [#4] | Snackbar component of Material library | Multi-color
Пікірлер: 35