Build framework-agnostic custom element with Angular Element through this step-by-step guide.
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.
One of the…
TL; DR: Data class reduces boilerplate code by automatically providing getter/setter, hashcode, equals, toString, and componentN methods.
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 we want to include the object properties in getter/setter, hashcode()/equals(), toString() and copy() functions, we can use a
Only object properties declared in the primary constructor will be used.
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.
We start by installing and importing the RxJS library.
npm install --save rxjs
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. …
Consider the following custom directives,
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 . …