Category: Angular

In this tutorial, we’re going to implement a polling mechanism using RxJs and Angular. Our goal is to retrieve and render information that gets refreshed periodically. Our example is going to be a currency service that displays up-to-date currency exchange rates

Source: How to do polling with RxJs and Angular? | by Alain Chautard | Angular Training

What if I need to read multiple properties from the object in that subscription?

Another way to put it is that you don’t want to end up doing something like this:

<p>First name: {{ (user$ | async)?.firstName }}</p>
<p>Last name: {{ (user$ | async)?.lastName }}</p>Code language: HTML, XML (xml)

The above code is pretty hard to read and requires one subscription for each property. This alone can be a disaster, as each subscription might trigger an HTTP request for the same data from the server!

Instead, you can do something like this, which uses only one subscription, stores the result in a local variable, then renders the data when it’s available. This technique works with any structural directive, such as *ngIf or *ngFor:

<div *ngIf="user$ | async as user">
   <p>First name: {{ user.firstName }}</p>
   <p>Last name: {{ user.lastName }}</p>
</div>

Source: Async pipe syntax tricks | Angular Newsletter

A complete guide on how to use Signals in an Angular application. Learn signals, their benefits, best practices, and patterns, and avoid the most common pitfalls.

Source: Angular Signals: Complete Guide

So now how about listening to events on the host element that wraps the component’s template? How can we do that properly in Angular apps? That’s the very question we will answer in this article. Before diving directly into listening to DOM events on a host element, I think we need to touch on what a host element is. The concept of host element applies not only to components but also attribute directives.

Source: Four ways of listening to DOM events in Angular (Part 2: @HostListener)

To run component tests only for a certain browser and spec file use this command:

ng test --browsers=Chrome --include=**/detail.component.spec.ts

Store is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.

Key concepts
Actions describe unique events that are dispatched from components and services. State changes are handled by pure functions called reducers that take the current state and the latest action to compute a new state. Selectors are pure functions used to select, derive and compose pieces of state. State is accessed with the Store, an observable of state and an observer of actions.

Local state management
NgRx Store is mainly for managing global state across an entire application. In cases where you need to manage temporary or local component state, consider using NgRx ComponentStore.

Source: NgRx – @ngrx/store