In this article, we’ll learn how we can type the
context object when creating custom structural directives. Let’s create a structural directive that provides the same functionality as the
async pipe. It’ll get an observable, subscribes to it, and expose the
next value via
We’ve created a structural directive that does nothing 😄. We skip the implementation because it’s not relevant to this article. You can learn about it in one of my previous articles.
Now let’s use it in the template and see that its
context is typed as
One of my colleagues recently asked me a question — I’m consuming an
onPush component, let’s call it
FooComponent, and passing an inline object to one of its inputs:
Angular runs a change detection cycle for the
AppComponent. Does Angular create a new object, forcing the
FooComponent to be checked?
Well, it depends. In our case, when Angular compiles the template, it notices that our object is static, and it doesn’t use any bindings. Therefore, Angular will create it once, cache it, and always return the same reference on subsequent checks.
If we take a look at the compiled…
The Angular Router module provides the
routerLink directive that takes a string or an array of path segments representing the address to which we want to navigate . For example:
For small applications with one or two pages, we can get away using this approach. But for large applications, which are heavily routed, where we can navigate to the same location from many places, it won’t hold water.
Let’s create a checklist of what we expect our solution to feature:
The component can be rendered multiple times, as part of different views. One of the views is a cell renderer inside our grids. In such a case, we need to run some specific functionality when we toggle the visibility of the menu. One way to solve this is to use an
input that will indicate if we’re in a grid context:
I’m skipping the implementation of the component because it’s not…
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:
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
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. …
I'm a Frontend Tech Lead at Lumigo, blogger, open source maintainer, creator of Akita and Spectator, Husband, and Father.