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. …
I see a lot of developers struggling with the following scenario; they want a focusable element, such as input, to receive focus once it’s initially visible.
The first thing everyone attempts is to add the native autofocus
attribute to the element:
Then the page is refreshed, and voila — it works. The element is focused. However, there are two prominent cases where this method might not work. The first case is when you reach this element without reloading the page, e.g. it appears after navigation in a single page application. …
It’s often the case where we need to alter our application’s index.html
file, based on the environment. The most common example is adding some analytics scripts to our production environment. In this article, I want to show you two different ways to do it using Angular CLI.
First, let’s take a look at the straightforward way; if we examine the JSON input schema of the schematics browser builder, we see the index
option — the path of a file to use as the application’s HTML index file. …
There are times when we may want to run a piece of code only in either development or production mode. It can be something small, like logging some data to the console, or something much bigger, like loading an entire library.
In this article, I want to show you how we make sure that an undesired piece of code doesn’t reach our final bundle. Let’s start with the solution known to all:
We can use environment files — Angular CLI will load the relevant file based on the configuration, and remove the unreachable code when building to production. …
Let’s face it — when we work on the front end, writing CSS is not the thing that excites us the most. We like to mess with the more serious stuff (you know what I mean — JavaScript). Most of the apps I’ve come across, and I am sure you have too, have a big mess in the stylesheet area. Issues like code duplication, overriding styles, lack of organization, etc. are rampant.
In this article, I’d like to share with you how I came up with a methodology that improves my styles, and therefore, my lifestyle 😇
In each application…
I'm a Frontend Tech Lead at Lumigo, blogger, open source maintainer, creator of Akita and Spectator, Husband, and Father.