Building a re-usable custom scroll bar

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.

A simple yet powerful context menu for angular applications

Banner image for the article
Banner image for the article

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.

Selecting the Image Source

For this tutorial, let’s…

Barik Jyoti

Full stack engineer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store