Custom SnackBar using Angular2/Material
SnackBars are material component which is used to inform users in a non intrusive way.
SnackBar is a part of official Material Design. Angular 2/Material provides with a service to create such snackbars in an Angular 2 applications.
import {MdSnackBar} from '@angular/Material';export UsingMdSnackBar{
constructor(private mdSnackBar: MdSnackBar){}
showSnackBar(){
this.mdSnackBar.open('I am a snack-bar', 'Close', { duration: 1000});
}
}
Material Design Specifies that a snackbar has to appear in from the bottom. However we needed a snackBar that is different in color, appear at the top and have a ‘x’ button to dispose. So we had to extend the official MdSnackBar.
Creating a snack-bar has three steps.
- Create a service and extend MdSnackBar
- Create an Overlay
- Attach the SnackBar Container
- Attach the SnackBar Content
Create a service and extend MdSnackBar
Extend the MdSnackBar service as shown above. We will have to call the ‘super()’ call in the constructor and supply the required params for invoking the parent class.
Create an Overlay
Overlays are objects that sit on top of the application. Thus they appear outside of the application DOM tree.
Since I need my snack-bar to be centered at the top, I will over-write the _createOverlay method with the below code.
Attach SnackBar Container
The SnackBar container is the element that will host the snackbar content. They are glued together by ComponentPortal API of Angular2/Material/Core.
We need to create our own container with our own scss styles. It is good to extend the MdSnackBarContainer to ensure stability.
Extending a component does not extend the meta-data or decorators of a component. Thus it is necessary to rewrite them in our component.
Observe the change we need to make with initial state and complete state of animation. It make the custom snakbar slide-in from the top and slide-out.
It is necessary to add the ‘cdkPortalHost’ directive to the component template. This acts as the glue that connects the SnackBar container with SnackBar component.
Attaching the snack-bar Container is done be overwriting the ‘_attachSnackBarContainer’ method in our service.
Observe the only change in code is the use of our newly created ‘SnackbarContainerComponent’. We retain the rest of the code as to have the rest of the functionality intact from MdSnackBar.
Attaching SnackBar Content
Create a new component called SnackbarComponent. This will be a simple stand alone component that will have the content of the snackbar.
I have made some changes to the component that will render the message as a html and show a ‘X’ button that will dismiss the snackBar when clicked.
Attaching the snackBar content will be by overwriting the ‘_attachSnackbarContent’ method of MdSnackBar.
Observe the change is just the component is replaced by our ‘SnackbarComponent’. This way the MdSnackBar’s functionality of handling multiple snack-bars, configuration and stability is intact.
Below is the final form of our CcSnackBar Service.
We can now use our CcSnackBarService like mdSnackBar Service.
This our required custom snack bar can be realized.
