In a past post, I discussed the importance of signal-based components and how such components will change the way we architect Angular applications for better performance. I’ve also mentioned the computed() function used to derive values from any number of signals. For instance: name = signal("Al");lastName = signal("Test");fullName = computed(() => this.name() + " " + this.lastName()); In the above example, changing the value of either name or lastName will automatically update the value of fullName. What happens with computed() is that any signal read inside the computed function becom ..read more

With the release of Angular 17.3, signal-based components have become a reality. A signal-based component is one in which all data inputs, outputs, and queries are independent of RxJs and use Angular Signals instead. In other words, here is how we used to write Angular components: import { AsyncPipe } from '@angular/common';import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';@Component({//...})export class HelloComponent { @Input() name = 'World'; @Output() greetingClicked = new EventEmitter<string>(); @ViewChild(ProfileComponent) profileCompone ..read more

A forest of cypress trees, Cyberpunk style — generated with Nightcafe Cypress is an excellent option for end-to-end testing, and you can learn more about the basics of Cypress with this tutorial. In this post, I will cover how to test individual components with Cypress, an available option for Angular, React, Svelte, and Vue.js. What’s the difference between end-to-end testing and component testing? While Cypress commands and features remain the same, these are two distinct testing modes within Cypress: End-to-end testing loads the entire web application in a browser. Component test ..read more

With the release of Angular Signals, RxJS-based state management libraries had to adapt and create signal-based alternatives, which NgRx has done with its version 17. In this post, we’re diving into how to use NgRx SignalStore, the syntax and the different options, and how different it is from regular signals. My example comes from my free Angular Signals workshop, which is now available on YouTube. How to install NgRx SignalStore? This is the easiest step. Run that command in your Angular project: npm install @ngrx/signals Note that NgRx SignalStore is independent of Ng ..read more

Angular logo streaming server-side code to a browser — an AI-generated image edited by yours truly In this post, I cover how to do server-side rendering (SSR) with Angular, why and when it matters, and everything you need to know to get started. Why server-side rendering (SSR)? There are a few good reasons to use SSR: Make your application faster: If your app has a lot of static content that is always the same (not user-specific), it makes sense to have that content built on the server side and returned to all users because the server can (and will) cache that content, which pr ..read more

Angular is all about components, but we need to remember that directives can be a better option occasionally. To illustrate this, here is an example of a feature we want to implement: Detect when the user clicks outside of an element/component Send an event to the parent component when that happens This feature can be helpful if you want to close a dropdown, a dialog, or a date picker when the user clicks away from it. First, we generate a directive and inject a reference to its native HTML element: @Directive({ selector: '[appClickOutside]', standalone: true})export class ..read more

Angular 17 has an updated logo and brand identity, a new website (angular.dev), and many more features that will be covered in my Daily Angular Newsletter over the next few days. In this article, let’s cover the new control flows available in our Angular HTML templates. New “If — then — else” syntax We’re used to the ngIf directive and its cumbersome “else” syntax as follows: <div *ngIf="condition; else elseBlock"> Content to render when the condition is true.</div><ng-template #elseBlock> Content to render when the condition is false.</ng-template> ..read more

Angular Signals have been available since Angular 16.0.0, and one of the best ways to understand how important of a feature it is is to compare Signals to RxJs. This post will highlight several different examples. Receiving data in a Typescript class With RxJs Observables, we need a subscription to get our data: myData$: Observable<Data>;this.myData$.subscribe(d => this.data = d); With Signals, no subscription is necessary. We call the Signal’s getter function: myData: Signal<Data>;this.data = this.myData(); Receiving data in an HTML template With RxJs, we can avo ..read more

As an Angular developer, you might have encountered ng-template when using the *ngIf syntax with an else block: <div *ngIf="condition; else elseBlock"> Content to render when the condition is true.</div><ng-template #elseBlock> Content to render when the condition is false.</ng-template> The thing is, under the hood, Angular is using ng-template a lot. For instance, every time we use *ngIf or *ngFor, the syntax we’re used to is syntactic sugar for ng-template. So, when we write the following: <div *ngIf="condition"> Content to render when the conditi ..read more

Some best practices are emerging as Signals are available in developer preview with Angular 16. As a reminder, this is how we create a Signal with Angular: currency = signal('USD'); This creates a WritableSignal, meaning that any code that has a reference to that Signal can update its value with: currency.set('CAD'); While being able to update a Signal from anywhere can be convenient, it can also lead to components taking over too much of the business logic of an application. With Angular, we want to delegate that part to services, which is why when using RxJs Subjects, we ..read more