Sign in

Full-stack Web Developer | Twitter @ https://twitter.com/FrontEndJunkie

Build framework-agnostic custom element with Angular Element through this step-by-step guide.

What and Why

If we have some React apps, some app built in Angular, and other vanilla JavaScript apps, how do we reuse the same common component in all those apps?

This is when we need a web component.

Web component follows a specification set by the W3C, which allows us to define new custom HTML elements. It is futureproofed since it can be used in any JS framework or no framework at all.

There are some great talks about web component/custom element, which I highly recommend checking out.

How do we build web components?

One of the…


TL; DR: Data class reduces boilerplate code by automatically providing getter/setter, hashcode, equals, toString, and componentN methods.

Photo by Joel Rohland on Unsplash

Kotlin provides a special type of class known as the data class, which has a prefix with the data keyword. An example of a data class is as below:

data class Song(val genre: String, val artist: String)

When to use Kotlin data class?

When we want to include the object properties in getter/setter, hashcode()/equals(), toString() and copy() functions, we can use a data class.

Only object properties declared in the primary constructor will be used.

With Song as our data class example, all of its properties in the primary…


In this post, we look at how we can make non-blocking concurrent API requests in Vanilla JS with RxJS (with demo) and why not just using plain Promise.

There are many use cases where we would need to aggregate data from multiple REST endpoints. In some cases, the sequence of the API requests does not matter and all we care about is when all those requests are resolved.

Let’s see how we can make the API calls concurrently using RxJS.

The ‘Zip’ Operator 🤐

We start by installing and importing the RxJS library.

npm install --save rxjs

If you are new to RxJS, it…


Photo by Abigail Keenan on Unsplash

One of the many ways to improve code quality is to use a static code analysis tool like SonarQube. Multiple languages are supported by the tool and we can tweak the configurations to include or to exclude certain rules.

Normally we would integrate SonarQube together with CI/CD pipelines for improving productivity. Nevertheless, it is still useful to have a local instance of SonarQubefor for certain scenarios and projects.

The following step-by-step walk-through assumes that Docker Desktop has been installed. If it’s not, you can find really great documentation on how to install it here. …


Photo by Javier García on Unsplash

Consider the following custom directives, myDir and myCustomDir , which take in conditionA as input :

<div *myDir = "conditionA"> ... </div><div [myCustomDir] = "conditionA"> ... </div>

When we need to pass values to our custom directives, how do we know when to use an asterisk (*) and when to use square brackets [].

TLDR: Use asterisk (*) with structural directives and square brackets [] with attribute directives.

In the following quick guide, we will look at why some custom directives have a square bracket [myCustomDir] syntax but some are using the asterisk syntax *myDir . …

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