Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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 😇

Create a Core Component Library

In each application, there’s a uniform style which exists throughout it. It can be reflected in the styles of inputs, buttons, tabs, tooltips, etc. Therefore I recommend writing a core components library based on the application style guide. The benefits of such a library are having a single source of truth for component style and behavior, and faster development cycles, especially as the app grows bigger and more complex. For…


Image for post
Image for post

Using confirmation dialogs is a well-known technique web applications employ to prevent users from performing actions that they didn’t really intend to do.

A typical example is when a user wants to delete an entity, we’ll present a dialog to confirm the deletion. Most apps seem to use a modal that takes the entire screen. Modals of this kind can be verbose and intimidating. In this article, I want to show you how to create a more compact and cleaner solution, and how to make it reusable. Here’s our final result:


Image for post
Image for post

Image lazy loading defers the loading of an image that isn’t currently visible in the viewport. Such an image will be loaded only when the user scrolls and the image becomes visible. Using this technique, we can gain better performance and load time.

Today modern browsers added native support for lazy loading images, and we can benefit from it by adding one simple attribute to our img element:

The loading attribute supports three options — auto, eager, and lazy. Setting it to lazy will defer the loading of the resource until it reaches a calculated distance from the viewport.


Image for post
Image for post

Using modals is one of the most popular UX concepts, which almost every application uses. In most cases, we’ll open the modal only when a user triggers a specific action.

If we think about it, it would be a waste to add the modal’s code to our initial bundle, because each client would have to download and parse it, even though they probably wouldn’t have cause to use it.

A better course of action would be to lazy load the modal’s code when the user initiates the action. Let’s see how easy it is to do that with Ivy:

When the user clicks on the button, we load the UsersManager component, passing it to our dialog service. We also use the Webpack magic comment webpackPrefetch. This will result in <link rel=”prefetch” href=”users-manager-chunk.js”> being appended in the head of the page, which will instruct the browser to prefetch in idle time the users-manager-chunk.js

About

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