In this article, I’ll discuss a pattern used by developers when building a core components library. When designing components such as text inputs, checkboxes, radio and action buttons, etc., they tend to hide the native DOM element inside the component. Doing so isn’t the best approach for two reasons:

  • We want to give the component’s consumers the ability to directly handle the native element API, such as defining event handlers or attributes without exposing and managing them from the component.
  • We want to use the native Angular value accessor support for these elements and not create a redundant custom value…

I recently tweeted about the ability to use plain text to render Angular components. This made some people curious as to how I did it. So let me explain:

Actually, it quite simple. The “trick” is to use Web Components. Thanks to the Angular elements package, we can create native custom elements from Angular components. This way, we can use the native innerHTML property, passing a plain string that contains our custom elements, and let Angular do the rest.

In this article, I’ll not go over the Angular elements API. If you want to know how it works under the…

It’s finally here. In Angular v12 (next), there is a new functionality we’re all been waiting for — passing metadata to HTTP interceptors. No more dirty hacks, such as using an HTTP header to pass custom data that our interceptor needs.

One common use case is to notify the interceptor that a request is cacheable. Let’s see how we use it.

First, update to the latest version of Angular. Next, create a new interceptor:

ng g interceptor cache

Next, we need to create a unique token using HttpContextToken and provide a default value for it. …

Handling the loading state of an async request can be a tedious task. The typical process is to create a loading flag on the component and toggle it based on the request status. For example:

And this is only the update operation use case. What about cases where we also need to handle data fetching, create a new entity, or delete an existing one?

Let’s face it — no one likes to write such code. To make it more DRY and clean, I’ve created a small library named loadoff. Let’s see a complete example:

To create a loader…

In our application, we work a lot with grids. We have a unique design for situations where specific cells are considered ״empty״. The naive approach is to repeat ourselves in every use case and do something like this:

But we are better than that. We can create a structural directive that’ll encapsulate this repetitive code:

First, we create a component for our empty state view. Then, we create a structural directive that takes the value and optional predicate, which defaults to isNil( a function that checks whether a value is undefined or null )

Finally, based on the…

When working with responsive applications, it’s often the case that we need to toggle the visibility of some elements in our page, based on the viewport size. The most common technique to do so is to define CSS media queries, and to set the CSS display property to none in the relevant ones. For example:

One disadvantage to this approach is that the element and its children are still part of the Angular render tree, and will therefore be checked each time a change detection cycle runs. …

A few weeks ago, I came across a neat React library — react-hot-toast. At that moment, I told myself I had to mimic it for the Angular community. Unfortunately I’m swamped and didn’t have time to do it, so I turned to Dharmen Shah, and guess what? We’ve created the best Angular toast in town:

I recently tweeted about the ability to bind variables in Angular and found out that many people don’t know that we can do it. This ability exists from version 9, or by its official name — Ivy.

So, I decided to write a short article that’ll make the information accessible to everyone. We can bind CSS variables in the template using the style property:

Or in our component using HostBinding:

We can do many powerful things with CSS variables such as styling pseudo-elements, math, etc. …

Angular calls the ngOnChanges method of a component or directive whenever it detects changes to the input properties. The method receives a SimpleChanges object of current and previous property values.

Unfortunately, the SimpleChanges interface isn’t fully typed out of the box; but no worries — in this article, we’ll see how we can build a typed version of it.

First, let’s create a component so that we’ll have something to work with:

Our first goal is to create a utility type that receives an object type, and returns all its properties which have a value that isn’t a function

In this article, I want to talk about a feature which Angular provides, that isn’t particularly well known or used by many developers. When using Angular InjectionToken, we can specify a factory function which returns a default value of the parameterized type T. For example:

This sets up the InjectionToken using this factory as a provider, as if it was defined explicitly in the application’s root injector. Now we can use it anywhere in our application:

But that’s not all. We can use the inject function to obtain a reference to other providers inside our factory function. …

Netanel Basal

I'm a Frontend Tech Lead at Lumigo, blogger, open source maintainer, creator of Akita and Spectator, Husband, and Father.

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