In this article, we will learn to customize the browser’s default scroll bar with an elegant and interactive custom scroll bar using Angular directive.
The default scroll bar on a div with over-flowing content appears below.
As professional Angular developers sometimes we come across unconventional requirements. One such requirement is to override the browser’s right-click context menu and provide a custom context menu.
There are a few ways to approach this requirement. One way is to use Angular CDK. A great article on this can be found here.
Another way is to leverage the contextmenu event of HTML elements. This event is supported by all major browsers as can be seen below from MDN documentation. This is the approach we will take in this article.
Recently I was presented with a challenge to quickly build an image gallery. The key requirements for the exercise were to use Angular 8 and Bootstrap 4. In this article, I have explained how we can achieve this with minimum time, effort, and resources. Since this is a practical use case in many applications, I hope it will help developers trying to build a similar feature.
Note that for this tutorial, I have used Visual Studio Code on a Windows machine. However, you can follow along with any environment and IDE that support Angular application development.