Forem: Amos Isaila

Angular 21.1: What’s new

Amos Isaila — Thu, 22 Jan 2026 05:46:58 +0000

This release enhances the new signal forms API with programmatic focus control, adds fall-through support to @switch control flow, and…

Continue reading on Medium »

Making Sense of Metadata in Angular Signal Forms

Amos Isaila — Mon, 15 Dec 2025 07:31:24 +0000

A practical guide using a real weather chatbot that validates cities against an API

Continue reading on Medium »

Angular 21.0.1: The Missing “Style Link” in Signal Forms

Amos Isaila — Tue, 02 Dec 2025 06:06:39 +0000

If you’ve been experimenting with the new Signal Forms in Angular 21, you might have noticed something missing. You set up your schemas…

Continue reading on Medium »

Angular 21: What’s new

Amos Isaila — Fri, 21 Nov 2025 04:52:46 +0000

The most significant shift is the zoneless-by-default approach. The future is reactive, performant, and decidedly signal-driven — and…

Continue reading on Medium »

Mastering the New debounce() API in Angular 21 Signal Forms

Amos Isaila — Wed, 19 Nov 2025 05:33:02 +0000

In this comprehensive guide, we’ll explore the debounce() API through a real-world weather chatbot application, demonstrating how this…

Continue reading on Medium »

Building Your Own MCP Server: Angular Best Practices Refactoring Tool — Part 2

Amos Isaila — Tue, 04 Nov 2025 19:39:09 +0000

In Part 1, we explored the theory behind Model Context Protocol, now it’s time to get our hands dirty.

Continue reading on Medium »

Understanding Model Context Protocol (MCP) — Part 1

Amos Isaila — Fri, 10 Oct 2025 18:57:23 +0000

Understanding Model Context Protocol (MCP) — Part 1

The Birth of a New Standard: How MCP Came to Be

Large Language Models (LLMs) like ChatGPT, Claude, and Gemini can write code, debug complex problems, and explain technical concepts with remarkable fluency. Yet despite their brilliance, they’ve been operating in isolation-powerful minds trapped in a room with no doors or windows.

Picture this: you have an AI assistant that can write flawless TypeScript, suggest perfect Angular component architectures, and identify bugs in milliseconds. But it can’t see your actual project files, can’t access your database, can’t read your API documentation, and has no idea what tools you’re using. It’s like hiring a world-class architect who has to design your house without ever seeing the plot of land, checking local building codes, or knowing what materials are available.

This has been the fundamental limitation of AI development tools-until now.

The Genesis: Anthropic’s Vision

In November 2024, Anthropic — the AI safety company founded by former OpenAI researchers and creators of Claude — unveiled something that would change the landscape of AI integration: the Model Context Protocol (MCP).

The team at Anthropic had been grappling with a persistent problem. As they worked on making Claude more useful for real-world tasks, they kept running into the same wall: every time they wanted to connect Claude to a new tool, service, or data source, they had to build a custom integration from scratch. Database access required one approach. File system operations needed another. API integrations each demanded unique implementations.

It was the API chaos problem we explored earlier, but at a massive scale.

The Open Standard Revolution

Rather than building yet another proprietary solution, Anthropic made a bold decision: they would create an open, universal protocol that any AI system could use to connect with any tool or service. On November 25, 2024, they released MCP as an open-source specification, complete with SDKs in Python and TypeScript.

The core idea was elegant: instead of building point-to-point integrations between every AI model and every service, create a standardized “language” that both sides could speak. Think of it as establishing USB-C for AI connectivity-one protocol to rule them all.

What made MCP truly revolutionary wasn’t just the technical specification. It was the philosophy behind it:

Open and Free : Anyone could implement it, no licensing fees, no vendor lock-in
Bidirectional : Both AI systems and services could initiate communication
Secure by Design : Built-in authorization and sandboxing capabilities
Simple Yet Powerful : Easy enough for individual developers to implement, robust enough for enterprise systems

The Unprecedented Adoption

Here’s where the story gets really interesting. In the tech world, standards battles typically drag on for years. Companies fight over competing specifications, each pushing their own solution. But something different happened with MCP.

By March 2025 , just four months after its introduction, OpenAI — Anthropic’s biggest competitor — announced they were adopting MCP for GPT integrations. Let that sink in: a company competing directly with Anthropic chose to embrace their open standard rather than build their own.

April 2025 brought another bombshell: Google DeepMind integrated MCP support into their AI offerings. Microsoft followed in May 2025 , incorporating MCP into Azure AI services and announcing plans to support it across their development tools ecosystem.

When fierce competitors this quickly agree on a standard, you’re witnessing something rare in tech history. It’s reminiscent of how HTTP became the universal protocol for the web, or how REST APIs became the de facto standard for web services.

From Concept to Ecosystem

Today, less than a year after its introduction, MCP has evolved from a novel idea into a thriving ecosystem. Development tools like Cursor, Windsurf, and Zed have built-in MCP support. Major SaaS companies are releasing official MCP servers. The community has created hundreds of integrations.

What started as Anthropic’s solution to their own integration challenges has become the foundation for how AI systems interact with the digital world.

And that’s exactly what we’re going to explore in this article: understanding the principles behind MCP and learning how to build our own MCP server using Angular, joining this revolution in AI integration.

The Fundamental Problem: AI That Can Only “Talk”

When you ask ChatGPT to “plan me a week-long holiday in Costa Rica,” it can tell you exactly what to do, suggest amazing destinations, even help you create detailed itineraries — but it cannot actually open a browser, navigate to travel sites, check real-time availability, or complete bookings. LLMs are fundamentally text generators, not action-takers. This is essentially the limitation that Large Language Models (LLMs) like GPT face today.

Enter AI Agents: The Hands and Feet of AI

This is where AI agents come into play. Think of an AI agent as an intelligent assistant that combines the reasoning power of an LLM with the ability actually to do things. It’s like giving that brilliant person in the room a set of tools, internet access, and the ability to interact with the outside world.

An AI agent follows a simple but powerful pattern:

Receive a request from the user
Think about it using an LLM (“What kind of holiday experience does the user want?”)
Take actions by calling external services and APIs
Think again about the results (“Do these options match their preferences? Do I need more information?”)
Repeat until the task is complete

For example, when you say “plan me an adventure holiday in Costa Rica,” an AI agent might:

Ask the LLM to extract details (budget, interests, group size, dates)
Call tourism APIs to find available activities and accommodations
Check weather services for seasonal considerations
Ask the LLM to analyze options against your adventure preferences
Present a complete itinerary with bookable options

The API Chaos Problem

Here’s where things get complicated. Every travel service has its own API:

Airbnb uses /v2/listings/search
TripAdvisor uses /experiences/search
National Parks Service uses /parks/activities
Local tour operators each have unique endpoints

// The nightmare of integrating multiple travel APIs - each one is different!

class HolidayPlanningAgent {
  async findAccommodations(destination, checkin, checkout, guests) {
    let results = [];

    // Airbnb - uses Bearer token, POST request
    const airbnbResponse = await fetch(`https://api.airbnb.com/v2/listings/search`, {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${this.airbnbToken}` },
      body: JSON.stringify({
        location: destination, // calls it 'location'
        check_in: checkin, // underscore format
        adults: guests
      })
    });
    // Returns: { listings: [{ price_per_night, coordinates: {lat, lng} }] }

    // Booking.com - uses Basic auth, GET request  
    const bookingResponse = await fetch(`https://distribution-xml.booking.com/2.4/json/hotelAvailability`, {
      method: 'GET',
      headers: { 'Authorization': `Basic ${this.bookingAuth}` },
      params: {
        city: destination, // calls it 'city'
        checkin_date: checkin, // different naming
        room1: `A,A,${guests}` // completely different format
      }
    });
    // Returns: { result: [{ min_total_price, latitude, longitude }] }

    // Hotels.com - uses API key, different date format
    const hotelsResponse = await fetch(`https://api.ean.com/ean-services/rs/hotel/v3/list`, {
      headers: { 'Authorization': `EAN APIKey=${this.hotelsKey}` },
      params: {
        destinationString: destination, // yet another name
        arrivalDate: checkin.replace(/-/g, '/'), // wants MM/DD/YYYY format
        RoomGroup: `(A,${guests})` // parentheses format
      }
    });
    // Returns: { HotelListResponse: { HotelList: { HotelSummary: [{ lowRate }] } } }

    return results; // Each API returns completely different data structures
  }

  async findActivities(destination, type) {
    // TripAdvisor
    await fetch(`https://api.tripadvisor.com/api/partner/2.0/experiences/search`, {
      params: { location: destination, category: this.mapToTripAdvisorCategory(type) }
    });
    // Returns: { data: [{ experience_id, title, price_from }] }
    // GetYourGuide  
    await fetch(`https://www.getyourguide.com/api/v1/activities`, {
      method: 'POST',
      body: JSON.stringify({
        data: { type: 'activity-search', attributes: { destination } }
      })
    });
    // Returns JSON API format: { data: [{ id, attributes: { title, price: { amount } } }] }
    // National Parks
    await fetch(`https://developer.nps.gov/api/v1/activities/parks`, {
      params: { q: destination } // calls it 'q' instead of 'destination'
    });
    // Returns: { data: [{ parks: [{ fullName, entranceFees: [{ cost }] }] }] }
  }

  // Every API needs different category mappings
  mapToTripAdvisorCategory(type) {
    return { 'adventure': 'outdoor-activities', 'culture': 'cultural-tours' }[type];
  }
}

/*
The Problem: 
- 6 different authentication methods (Bearer, Basic, API Key)
- 6 different request formats (POST vs GET, different JSON structures)
- 6 different parameter names for the same concept (location vs city vs destinationString vs q)
- 6 different response formats to parse and normalize
- 6 different error handling approaches
- Constant maintenance as each API evolves independently
Result: You spend more time on API integration than actual holiday planning logic!
*/

Each returns data in different formats, requires different authentication, and has different parameter names. If you want your AI agent to work with hundreds of accommodation providers, activity companies, restaurants, and attractions, you’d need to write custom integration code for each one.

This is like having a universal remote control that needs a different button layout for every device — it’s technically possible but practically unsustainable.

Model Context Protocol: The Universal Translator

Model Context Protocol (MCP) solves this problem by creating a standardized way for AI agents to communicate with external services. Instead of writing custom code for each travel API, you create an MCP server that acts as a translator between the standardized MCP language and the service’s specific API.

Think of MCP as creating a universal interface. Instead of your AI agent needing to learn 1,000 different ways to say “find adventure activities,” there’s now one standard way that works with any MCP-compatible service.

The Three Pillars of MCP

Every MCP server exposes three types of capabilities:

1. Tools — The Actions

Tools are the things your AI agent can do. These are functions that perform actions or retrieve data:

search_accommodations(location, checkin, checkout, guests)
find_activities(destination, activity_type, difficulty_level)
get_restaurant_recommendations(location, cuisine, budget)
check_weather_forecast(destination, dates)

2. Resources — The Context

Resources are static information that helps the AI make better decisions:

Destination guides and local customs
Activity difficulty ratings and requirements
Seasonal travel recommendations
Visa and vaccination requirements
Currency exchange rates and tipping guides

3. Prompts — The Wisdom

Prompts are pre-written instructions that help the AI use the tools correctly:

“When planning adventure trips, always check weather patterns and seasonal accessibility”
“For family holidays, prioritize activities suitable for all age groups mentioned”
“When suggesting accommodations, consider proximity to planned activities”

The Architecture: Client Meets Server

MCP follows a simple client-server model:

MCP Client (your AI agent or IDE):

Discovers what an MCP server can do
Sends requests to perform actions
Receives responses and data

MCP Server (the service provider):

Exposes tools, resources, and prompts
Handles the actual API calls to external services
Returns standardized responses

The communication happens through JSON-RPC, a lightweight protocol that’s like having a standardized conversation format:

Client: "Can you search for adventure activities?"
Server: "Yes, I can do that. Give me destination, activity type, and difficulty level."
Client: "Find zip-lining activities in Costa Rica for intermediate level"
Server: "Here are 8 zip-lining tours matching your criteria..."

The Communication Protocol: JSON-RPC 2.0

Before diving into the MCP specification itself, we need to understand how MCP clients and servers actually communicate with each other. MCP uses JSON-RPC 2.0 as its communication protocol — think of it as the “language” that clients and servers speak when exchanging information.

What is JSON-RPC?

JSON-RPC ( JSON Remote Procedure Call ) is a lightweight, stateless protocol that allows a client to call methods on a remote server and receive responses. It’s essentially a standardized way to say “run this function with these parameters” across a network or between processes.

The “2.0” refers to the specification version, which defines exactly how requests and responses should be formatted. This standardization ensures that any JSON-RPC 2.0 client can communicate with any JSON-RPC 2.0 server, regardless of what programming language they’re built with.

The Basic Structure

Every JSON-RPC request must include four elements:

// JSON-RPC 2.0 Request Structure
{
  "jsonrpc": "2.0",
  "method": "search_hotels",
  "params": {
    "destination": "Costa Rica",
    "checkin": "2024-12-15",
    "checkout": "2024-12-22",
    "guests": 2
  },
  "id": 1
}

// JSON-RPC 2.0 Response Structure (Success)
{
  "jsonrpc": "2.0",
  "result": {
    "hotels": [
      {
        "id": "hotel_123",
        "name": "Rainforest Lodge",
        "price_per_night": 150,
        "location": "Manuel Antonio",
        "rating": 4.5
      },
      {
        "id": "hotel_456", 
        "name": "Beach Resort",
        "price_per_night": 200,
        "location": "Guanacaste",
        "rating": 4.2
      }
    ]
  },
  "id": 1
}

// JSON-RPC 2.0 Response Structure (Error)
{
  "jsonrpc": "2.0",
  "error": {
    "code": -32602,
    "message": "Invalid params",
    "data": "Missing required parameter: destination"
  },
  "id": 1
}

Transport Mechanisms

JSON-RPC 2.0 is transport-agnostic, meaning the protocol doesn’t dictate how messages are delivered. MCP supports two primary transport methods:

Standard I/O (stdio): Perfect for local development and testing. The MCP server runs as a subprocess, and messages are exchanged through standard input/output pipes. This is lightweight, secure, and ideal for IDEs like Cursor or VS Code extensions.

HTTP : Used when the MCP server is hosted remotely or needs to serve multiple clients simultaneously. Messages are sent as HTTP POST requests, making it easy to deploy MCP servers as web services.

MCP-Specific Conventions

While MCP uses standard JSON-RPC 2.0, it defines specific method names and parameter structures:

Discovery Methods :

tools/list - Get available tools
resources/list - Get available resources
prompts/list - Get available prompts

Action Methods :

tools/call - Execute a specific tool
resources/read - Retrieve resource content
prompts/get - Get a specific prompt

Notification Methods (no response expected):

notifications/initialized - Client signals it's ready
notifications/progress - Server reports progress updates

Error Handling

JSON-RPC 2.0 defines standard error codes that MCP extends:

-32700 Parse error (invalid JSON)
-32600 Invalid request (malformed JSON-RPC)
-32601 Method not found
-32602 Invalid params
-32603 Internal error
-32000 to -32099 Server-defined errors (MCP uses these for domain-specific issues)

This standardized approach means client applications can handle errors consistently across different MCP servers.

The beauty of this protocol choice is that it abstracts away all the complexity we saw in our API chaos examples. Instead of learning different authentication schemes, parameter formats, and response structures for each service, developers work with one consistent JSON-RPC interface while MCP servers handle the underlying API complexity behind the scenes.

The Ecosystem Effect

The real power of MCP emerges when it becomes widespread. Imagine a world where:

Every major travel platform provides an MCP server
Tourism boards offer MCP servers for their destinations
AI development tools automatically discover and connect to travel MCP servers
Building a holiday planning agent is as simple as configuring which destinations and services you want to include
Your agent can seamlessly work with any new tourism service that supports MCP

We’re moving toward a future where AI agents can plan and coordinate complex holiday experiences as easily as humans browse travel websites — and MCP is the standard that makes it possible.

What’s Next?

Now that you understand the foundational concepts of MCP, you’re ready to dive into the technical implementation. In the next article, we’ll explore how to build your own MCP server, create custom tools, and integrate everything into a working AI agent system (basically into our Angular project).

The beauty of MCP is that once you understand these core concepts, the implementation becomes a matter of following the specification — and that’s where the real fun begins.

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment , clap or follow. 👏

Spread the Angular love! 💜

If you really liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

Thanks for being part of this Angular journey! 👋😁

Originally published at https://www.codigotipado.com.

Mastering Angular 21 Signal Forms: A Deep Dive into the Experimental API

Amos Isaila — Thu, 02 Oct 2025 05:33:53 +0000

Angular 21 introduces one of the most significant improvements to form handling since the framework’s inception: Signal-Based Forms (Experimental).

Introduction

Traditional Angular forms, while powerful, have long suffered from several pain points:

Verbose boilerplate with FormBuilder, FormGroup, and FormControl
Complex state management requiring manual subscriptions
Performance overhead from Observable chains
Cumbersome validation error handling
Difficult form synchronization with component state

In this comprehensive guide, we’ll transform a real-world weather chatbot application from reactive forms to Signal Forms, showcasing:

Complete migration strategies
Performance improvements
Advanced validation techniques
Best practices for Signal Forms
When and how to adopt this new approach

You can find the source code of the Weather ChatBot App here.

Reactive Forms Pain Points

Let’s examine our weather chatbot application to understand the current challenges with reactive forms.

The Weather Chatbot Example

Our application features a weather query form with the following fields:

Date : When to check the weather
Country : Location country
City : Specific city
Temperature Unit : Celsius or Fahrenheit preference

Here’s the current reactive forms implementation:

// weather-chatbot.component.ts
@Component({
  selector: ‘app-weather-chatbot’,
  templateUrl: ‘./weather-chatbot.component.html’,
  imports: [CommonModule, ReactiveFormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WeatherChatbotComponent {
  private readonly _formBuilder = inject(FormBuilder);
  private readonly _chatService = inject(ChatService);

  protected readonly messages = signal<ChatMessage[]>([]);
  protected readonly isSubmitting = signal(false);

  protected readonly messageCount = computed(() => this.messages().length);
  protected readonly formValue = computed(() => this.weatherForm.value);
  protected readonly isDevelopment = signal(false);

  // Traditional Reactive Form
  protected readonly weatherForm: FormGroup = this._formBuilder.group({
    date: [’‘, Validators.required],
    country: [’‘, [Validators.required, Validators.minLength(2)]],
    city: [’‘, [Validators.required, Validators.minLength(2)]],
    temperatureUnit: [’celsius’, Validators.required] as [TemperatureUnit, any],
  });

  constructor() {
    // Manual form initialization
    const today = new Date().toISOString().split(’T’)[0];
    this.weatherForm.patchValue({ date: today });
  }

  protected onSubmitWeatherQuery(): void {
    // Manual form validation handling
    if (this.weatherForm.invalid) {
      this.weatherForm.markAllAsTouched();
      return;
    }

    const formData = this.weatherForm.value as WeatherFormData;
    const query = this._buildWeatherQuery(formData);

    this._addUserMessage(query);
    this._sendMessageToAI(query);
  }
}

The Template Pain Points

The template reveals additional complexity:

<!-- Complex validation error handling -->
@if (weatherForm.get(’country’)?.errors && weatherForm.get(’country’)?.touched) {
  <p class=”text-red-500 text-xs mt-1”>
    @if (weatherForm.get(’country’)?.errors?.[’required’]) { 
      Country is required 
    } 
    @if (weatherForm.get(’country’)?.errors?.[’minlength’]) { 
      Country must be at least 2 characters 
    }
  </p>
}

<!-- Verbose form control access -->
<input
  id=”country”
  type=”text”
  formControlName=”country”
  placeholder=”e.g., United States”
  class=”w-full px-3 py-2 border border-gray-300 rounded-lg...”
/>

Identified Pain Points

Boilerplate Overload : FormBuilder, FormGroup, manual validation setup
Type Safety Issues : weatherForm.value as WeatherFormData casting required
Complex Error Handling : Nested conditionals for validation messages
State Synchronization : Manual form value computed signals
Verbose Template Logic : Repeated weatherForm.get() calls
Mixed Paradigms : Signals for app state, Observables for forms

Signal Forms API Explained

Before diving into the migration, understanding the core Signal Forms API is essential. This section covers the key functions, types, and patterns you’ll use when building forms with Angular 21’s experimental Signal Forms.

Here is a diagram showing a high-level overview of Angular signal forms.

Core Form Creation

form(model, schema?, options?)

Creates a Signal Form bound to a data model. Updating the FieldState (form fields) updates also the model.

Parameters:

model: WritableSignal - The data signal that serves as the source of truth
schema?: SchemaOrSchemaFn - Optional validation and logic rules
options?: FormOptions - Optional configuration (injector, name, adapter)

Returns: Field - A reactive field tree matching your data structure

Example:

Basic Form (No Schema)

const data = signal({
  username: ‘’,
  email: ‘’
});

const basicForm = form(data);

// Access fields
basicForm.username().value(); // Read value
basicForm.username().value.set(’john’); // Write value

Form with Inline Schema Function (Most common pattern for defining validation inline)

const userForm = form(
  signal({ username: ‘’, email: ‘’, age: 0 }),
  (path) => {
    // path represents the root of your data structure
    required(path.username);
    required(path.email);
    email(path.email);
    min(path.age, 18, { message: ‘Must be 18 or older’ });
  }
);

The path parameter:

Type: FieldPath
Represents the root field
Provides type-safe navigation to all nested properties
Used to target which fields get which rules

The schema function parameter is called path because it represents a location or path in your data structure. Think of it like navigating a file system:

// Just like file paths:
// /user/profile/name
// /user/profile/email

// Signal Forms paths:
// path.user.profile.name
// path.user.profile.email

The path object is a proxy that mirrors your data model’s structure. When you write path.username, you’re not accessing actual data—you’re defining where in the form tree to apply validation rules.

// This is NOT data access:
const myForm = form(data, (path) => {
  required(path.username); // path.username is a “path marker”, not a value
});

// This IS data access:
const actualValue = myForm.username().value(); // Reading the actual data

path is directly related to PathKind. It’s a type-level marker that Angular uses to ensure you’re using validators and logic functions correctly based on where in the form tree they’re applied.

What is PathKind?

PathKind classifies paths into three categories based on their position in the form structure:

type PathKind = 
  | PathKind.Root // Top-level form path
  | PathKind.Child // Nested property path  
  | PathKind.Item // Array element path

PathKind.Root — The Entry Point

This is the path parameter you receive in your main schema function:

const myForm = form(signal(data), (path) => {
  // ↑ path is PathKind.Root
  // This is the root of your form tree

  required(path.username); // username is Child
  required(path.email); // email is Child
});

Characteristics:

The starting point of navigation
Accepts functions designed for Root, Child, or Item paths

PathKind.Child — Nested Properties

Any property accessed from another path becomes a Child:

type User = {
  profile: {
    firstName: string;
    lastName: string;
  };
};

const userForm = form(signal<User>(...), (path) => {
  // path = Root
  // path.profile = Child
  // path.profile.firstName = Child
  // path.profile.lastName = Child

  required(path.profile.firstName); // Child path
});

Characteristics:

Accessed via dot notation from another path
Represents a specific property in the data structure
Can be further navigated if the value is an object

PathKind.Item — Array Elements

Array items get special treatment with PathKind.Item:

type TodoList = {
  todos: Array<{
    title: string;
    done: boolean;
  }>;
};

const todoForm = form(signal<TodoList>(...), (path) => {
  // path = Root
  // path.todos = Child (the array itself)

  applyEach(path.todos, (itemPath) => {
    // itemPath = Item (one element in the array)
    // itemPath.title = Child (of the Item)
    // itemPath.done = Child (of the Item)

    required(itemPath.title);
    // itemPath has access to special item context
  });
});

Characteristics:

Only created through applyEach
Represents a single element in an array
Has access to additional context (like index)

Form with Predefined Schema (Reusable schemas for consistent validation across forms):

// Define schema once
const userSchema = schema<User>((path) => {
  required(path.username);
  minLength(path.username, 3);
  email(path.email);
});

// Reuse across multiple forms
const registrationForm = form(signal(newUser), userSchema);
const profileForm = form(signal(currentUser), userSchema);

Form with Options

const myForm = form(
  signal(data),
  (path) => {
    required(path.name);
  },
  {
    injector: customInjector, // Custom DI context
    name: ‘user-registration’, // Form identifier for debugging
    adapter: customFieldAdapter // Advanced customization
  }
);

Understanding the adapter ** Option**

The adapter option allows you to customize how fields are created and managed internally. This is an advanced, low-level API that most developers will never need to touch.

What does an adapter do?

It controls the internal lifecycle of form fields by implementing the FieldAdapter interface:

interface FieldAdapter {
  // How to create the field structure (parent-child relationships)
  createStructure(node: FieldNode, options: FieldNodeOptions): FieldNodeStructure;

  // How to create validation state (errors, valid, pending, etc.)
  createValidationState(node: FieldNode, options: FieldNodeOptions): ValidationState;

  // How to create field state (touched, dirty, disabled, etc.)
  createNodeState(node: FieldNode, options: FieldNodeOptions): FieldNodeState;

  // How to create child field nodes
  newChild(options: ChildFieldNodeOptions): FieldNode;

  // How to create root field nodes
  newRoot<TValue>(
    fieldManager: FormFieldManager,
    model: WritableSignal<TValue>,
    pathNode: FieldPathNode,
    adapter: FieldAdapter
  ): FieldNode;
}

When Would You Use a Custom Adapter?

1. Reactive Forms Compatibility Layer

This is the primary use case mentioned in the source code. If you’re migrating from reactive forms and need both systems to coexist:

// Hypothetical compatibility adapter
class ReactiveFormsAdapter implements FieldAdapter {
  createValidationState(node: FieldNode, options: FieldNodeOptions): ValidationState {
    // Return a validation state that also updates reactive forms validators
    return new HybridValidationState(node, this.reactiveFormControl);
  }

  // ... other methods
}

const hybridForm = form(
  signal(data),
  schema,
  { adapter: new ReactiveFormsAdapter(existingFormGroup) }
);

2. Testing and Debugging

Create adapters that expose additional debugging information:

class DebugAdapter implements FieldAdapter {
  private _fieldLog = new Map<string, any[]>();

  newRoot<TValue>(
    fieldManager: FormFieldManager,
    model: WritableSignal<TValue>,
    pathNode: FieldPathNode,
    adapter: FieldAdapter
  ): FieldNode {
    const node = FieldNode.newRoot(fieldManager, model, pathNode, adapter);

    // Track all field accesses
    this._fieldLog.set(’root’, []);
    effect(() => {
      this.fieldLog.get(’root’)?.push({
        timestamp: Date.now(),
        value: model()
      });
    });

    return node;
  }

  // ... other methods
}

// Use in tests
const testForm = form(signal(data), schema, { 
  adapter: new DebugAdapter() 
});

schema(fn: SchemaFn)

Creates a reusable schema (adds logic rules to a form) that can be applied to multiple forms or composed with other schemas.

Parameters:

fn: SchemaFn - A function that defines validation and logic rules ( non-reactive function)

Returns: Schema - A reusable schema object

Example:

const addressSchema = schema<Address>((path) => {
  required(path.street);
  required(path.city);
  minLength(path.zipCode, 5);
});

Field Types

Field

Represents a single field in the form. Acts as both a function and an object with subfields.

Key characteristics:

Call as function to access state: myForm() returns FieldState
Navigate as object: myForm.name accesses nested fields
Arrays are iterable: for (let item of myForm.items)

FieldState

The reactive state of a field, accessed by calling the field as a function.

Core properties:

interface FieldState<TValue> {
  value: WritableSignal<TValue>; // Read/write the field value
  errors: Signal<ValidationError[]>; // Current validation errors
  errorSummary: Signal<ValidationError[]>; // Errors including descendants
  valid: Signal<boolean>; // True if no errors and no pending validators
  invalid: Signal<boolean>; // True if has errors (regardless of pending)
  pending: Signal<boolean>; // True if async validators running
  touched: Signal<boolean>; // True if field has been blurred
  dirty: Signal<boolean>; // True if value has been changed
  disabled: Signal<boolean>; // True if field is disabled
  readonly: Signal<boolean>; // True if field is readonly
  hidden: Signal<boolean>; // True if field is hidden
  submitting: Signal<boolean>; // True if form is submitting
  name: Signal<string>; // Unique field name

  // Methods
  markAsTouched(): void;
  markAsDirty(): void;
  reset(): void;
  property<M>(prop: Property<M> | AggregateProperty<M, any>): M | Signal<M>;
}

Control Binding

Control Directive

Binds a Field to a UI control element.

Usage:

<input [control]=”myForm.fieldName” />
<textarea [control]=”myForm.description” />
<select [control]=”myForm.category” />
<input type=”checkbox” [control]=”myForm.accepted” />
<input type=”radio” [control]=”myForm.option” value=”a” />

Features:

Automatically syncs field value with control
Binds validation state (invalid, touched, etc.)
Handles disabled/readonly/hidden states
Works with native inputs and custom controls
Provides fake NgControl for reactive forms compatibility

Built-in Validators

All validators follow this pattern: validator(path, value?, config?)

required(path, config?)

Ensures field has a non-empty value.

required(path.name);
required(path.email, { message: ‘Email is required’ });
required(path.terms, { 
  when: (ctx) => ctx.valueOf(path.needsConsent) 
});

Also sets: REQUIRED aggregate property

minLength(path, length, config?)

Validates minimum string/array length.

minLength(path.password, 8);
minLength(path.username, 3, { message: ‘Too short’ });

Also sets: MIN_LENGTH aggregate property

maxLength(path, length, config?)

Validates maximum string/array length.

maxLength(path.bio, 500);

Also sets: MAX_LENGTH aggregate property

min(path, value, config?)

Validates minimum numeric value.

min(path.age, 18);
min(path.price, 0, { message: ‘Price cannot be negative’ });

Also sets: MIN aggregate property

max(path, value, config?)

Validates maximum numeric value.

max(path.quantity, 100);

Also sets: MAX aggregate property

pattern(path, regex, config?)

Validates against a regular expression.

pattern(path.phone, /^\d{3}-\d{3}-\d{4}$/);

Also sets: PATTERN aggregate property

email(path, config?)

Validates email format.

email(path.email);
email(path.email, { message: ‘Invalid email address’ });

Custom Validation

validate(path, validator)

Adds a custom synchronous validator for a single field.

validate(path.username, (ctx) => {
  const value = ctx.value();
  if (value.includes(’ ‘)) {
    return customError({ 
      kind: ‘no_spaces’,
      message: ‘Username cannot contain spaces’ 
    });
  }
  return null; // No error
});

Validator return types:

null | undefined | void - No error
ValidationError - Single error
ValidationError[] - Multiple errors

validateTree(path, validator)

Adds a validator that can target multiple fields.

validateTree(path, (ctx) => {
  const from = ctx.field.from().value();
  const to = ctx.field.to().value();

  if (from === to) {
    return {
      kind: ‘same_location’,
      field: ctx.field.from, // Target specific field
      message: ‘Departure and arrival cannot be the same’
    };
  }
  return null;
});

validateAsync(path, options)

For validation that requires server calls or time-consuming operations, use async validators.

import { rxResource } from ‘@angular/core/rxjs-interop’;
import { of, delay, map } from ‘rxjs’;

validateAsync(path.username, {
  // Map field state to resource parameters
  params: (ctx) => ({
    username: ctx.value()
  }),

  // Create resource with those parameters
  factory: (params) => {
    return rxResource({
      request: () => params().username,
      loader: ({ request: username }) => {
        // Simulate API call
        return of(null).pipe(
          delay(1000),
          map(() => checkUsernameAvailability(username))
        );
      }
    });
  },

  // Map resource result to errors
  errors: (result, ctx) => {
    if (!result.available) {
      return customError({
        kind: 'username_taken',
        message: `Username "${ctx.value()}" is already taken`,
        suggestions: result.suggestions
      });
    }
    return null;
  }
});

validateHttp(path, options)

Simplified async validation for HTTP requests.

validateHttp(path.email, {
  // Return URL or HttpResourceRequest
  request: (ctx) => ({
    url: ‘/api/validate-email’,
    params: { email: ctx.value() }
  }),

  // Map response to errors
  errors: (result, ctx) => {
    if (!result.valid) {
      return customError({
        kind: ‘invalid_email_server’,
        message: result.message || ‘Email validation failed’,
        details: result.details
      });
    }
    return null;
  },

  // Optional HttpResource options
  options: {
    reloadOn: [’submitted’] // Only revalidate on form submit
  }
});

Schema Composition

apply(path, schema)

Applies a schema to a specific field path.

const addressSchema = schema<Address>((path) => {
  required(path.street);
  required(path.city);
});

form(data, (path) => {
  apply(path.address, addressSchema);
});

applyEach(path, schema)

Applies a schema to each item in an array.

const itemSchema = schema<Item>((path) => {
  required(path.name);
  min(path.quantity, 1);
});

form(data, (path) => {
  applyEach(path.items, itemSchema);
});

applyWhen(path, condition, schema)

Conditionally applies a schema based on form state.

// Only validate shipping address if different from billing
applyWhen(
  path.shippingAddress,
  (ctx) => !ctx.valueOf(path.sameAsBilling),
  addressSchema
);

applyWhenValue(path, predicate, schema)

Conditionally applies a schema based on field value.

type PaymentMethod = 
  | { type: ‘card’; cardNumber: string; cvv: string }
  | { type: ‘paypal’; email: string }
  | { type: ‘bank’; accountNumber: string; routingNumber: string };

// Type-safe conditional schemas
applyWhenValue(
  path.payment,
  (payment): payment is Extract<PaymentMethod, { type: 'card' }> => 
    payment.type === 'card',
  (cardPath) => {
    required(cardPath.cardNumber);
    minLength(cardPath.cardNumber, 16);
    maxLength(cardPath.cardNumber, 16);
    required(cardPath.cvv);
    pattern(cardPath.cvv, /^\d{3,4}$/);
  }
);
applyWhenValue(
  path.payment,
  (payment): payment is Extract<PaymentMethod, { type: 'paypal' }> => 
    payment.type === 'paypal',
  (paypalPath) => {
    required(paypalPath.email);
    email(paypalPath.email);
  }
);

Field State Logic

disabled(path, logic?)

Makes a field disabled.

disabled(path.endDate, (ctx) => !ctx.valueOf(path.hasEndDate));

readonly(path, logic?)

Makes a field readonly.

readonly(path.id); // Always readonly
readonly(path.price, (ctx) => ctx.valueOf(path.isLocked));

hidden(path, logic)

Hides a field from display and validation.

hidden(path.optionalDetails, (ctx) => !ctx.valueOf(path.showDetails));

Form Submission

submit(form, action)

Handles form submission with automatic validation and error handling.

const onSubmit = submit(myForm, async (form) => {
  try {
    await saveData(form().value());
    return null; // Success
  } catch (error) {
    return [{
      kind: ‘save_error’,
      message: ‘Failed to save’,
      field: form
    }];
  }
});

Template usage:

<form (ngSubmit)=”onSubmit()”>
  <!-- form fields -->
</form>

Validation Errors

Creating Errors

Signal Forms provides type-safe error creation functions:

// Built-in errors
requiredError({ message: ‘This field is required’ })
minError(10, { message: ‘Must be at least 10’ })
maxError(100, { message: ‘Cannot exceed 100’ })
minLengthError(5, { message: ‘Too short’ })
maxLengthError(50, { message: ‘Too long’ })
patternError(/\d+/, { message: ‘Must contain numbers’ })
emailError({ message: ‘Invalid email format’ })

// Custom errors
customError({ 
  kind: 'my_validation',
  message: 'Custom validation failed',
  additionalData: 'any value'
})

Error Types

interface ValidationError {
  kind: string; // Error identifier
  field: Field<unknown>; // Target field
  message?: string; // User-facing message
}

// Specific error types
interface RequiredValidationError extends ValidationError {
  kind: 'required';
}
interface MinValidationError extends ValidationError {
  kind: 'min';
  min: number;
}

// Check error type
if (error instanceof NgValidationError) {
  switch (error.kind) {
    case 'required': /* ... */
    case 'min': /* ... */
  }
}

Custom Controls (no longer need ControlValueAccessor)

To create custom form controls, implement FormValueControl:

@Component({
  selector: ‘app-custom-input’,
  template: `<div>Custom control</div>`
})
export class CustomInputComponent implements FormValueControl<string> {
  value = model(’‘); // Required
  disabled = input(false); // Optional
  errors = input<ValidationError[]>([]); // Optional
  readonly = input(false); // Optional
  touched = model(false); // Optional
}

Usage:

<app-custom-input [control]=”myForm.field” />

Aggregate Properties

Aggregate properties allow validators to contribute metadata to fields:

// Read built-in properties
myForm.field().property(REQUIRED); // boolean
myForm.field().property(MIN_LENGTH); // number | undefined
myForm.field().property(MAX); // number | undefined
myForm.field().property(PATTERN); // RegExp[]

// Create custom properties
const TOOLTIP = createProperty<string>();
property(path.field, TOOLTIP, () => 'Help text here');
// Read in template
{{ myForm.field().property(TOOLTIP) }}

Type Safety

Signal Forms maintain full TypeScript type inference:

type User = {
  profile: {
    name: string;
    age: number;
  };
  tags: string[];
};

const userForm = form(signal<User>(...));
userForm.profile.name // Field<string>
userForm.profile.age // Field<number>
userForm.tags // Field<string[]> & Iterable
userForm.tags[0] // Field<string>

This API overview provides the foundation for understanding how Signal Forms work. The next section will show how to migrate from reactive forms using these APIs.

Enter Signal Forms: A New Paradigm

Signal Forms treats your data model as the single source of truth, with forms being a reactive view of that model.

Core Philosophy

// Traditional Reactive Forms: Form manages state
const form = this.formBuilder.group({
  name: [’‘, Validators.required]
});

// Signal Forms: Data model is the source of truth
const user = signal({ name: '' });
const userForm = form(user); // Form reflects the signal

Step-by-Step Migration Guide — Source Code

Let’s transform our weather chatbot from reactive forms to Signal Forms.

Step 1: Define the Data Model

First, we establish our data model as the source of truth:

// weather-chatbot-signal.component.ts
import { Component, signal, computed, inject, ChangeDetectionStrategy } from ‘@angular/core’;
import { form, Control, required, minLength, submit } from ‘@angular/forms/signals’;
import { CommonModule } from ‘@angular/common’;

type WeatherFormData = {
  date: string;
  country: string;
  city: string;
  temperatureUnit: 'celsius' | 'fahrenheit';
};
@Component({
  selector: 'app-weather-chatbot-signal',
  imports: [CommonModule, Control], // Note: Control instead of ReactiveFormsModule
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...` // We'll update this next
})
export class WeatherChatbotSignalComponent {
  private readonly _chatService = inject(ChatService);
  // Step 1: Data model as source of truth
  private readonly _weatherData = signal<WeatherFormData>({
    date: new Date().toISOString().split('T')[0],
    country: '',
    city: '',
    temperatureUnit: 'celsius'
  });
  // Step 2: Create Signal Form
  protected readonly weatherForm = form(this._weatherData, (path) => {
    required(path.date, { message: 'Date is required' });
    required(path.country, { message: 'Country is required' });
    required(path.city, { message: 'City is required' });
    minLength(path.country, 2, { message: 'Country must be at least 2 characters' });
    minLength(path.city, 2, { message: 'City must be at least 2 characters' });
    required(path.temperatureUnit, { message: 'Temperature unit is required' });
  });
  // Other signals remain the same
  protected readonly messages = signal<ChatMessage[]>([]);
  protected readonly isSubmitting = signal(false);
  protected readonly messageCount = computed(() => this.messages().length);
  protected shouldShowErrors(fieldErrors: any[], fieldTouched: boolean): boolean {
    return fieldErrors.length > 0 && fieldTouched;
  }
}

Step 2: Update the Template

The template becomes dramatically simpler:

<!-- Signal Forms Template -->
<form class=”space-y-4”>
  <!-- Date Input - Clean and Simple -->
  <div>
    <label for=”date” class=”block text-sm font-medium text-gray-700 mb-1”>
      Date
    </label>
    <input
      id=”date”
      type=”date”
      [control]=”weatherForm.date”
      class=”w-full px-3 py-2 border border-gray-300 rounded-lg...”
    />
     @if (shouldShowErrors(weatherForm.city().errors(), weatherForm.city().touched())) {
       @for (error of weatherForm.city().errors(); track $index) {
         <p class=”text-red-500 text-xs mt-1”>{{ error.message || ‘City is invalid’ }}</p>
        }
     }
  </div>

<!-- Same for other fields... -->
  <button
    type="button"
    (click)="onSubmitWeatherQuery()"
    [disabled]="!weatherForm().valid() || isSubmitting()"
    class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg..."
  >
    @if (isSubmitting()) {
      <span class="flex items-center justify-center">
        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" ...>
          <!-- Loading spinner -->
        </svg>
        Getting Weather...
      </span>
    } @else {
      🌤️ Ask About Weather
    }
  </button>
</form>

Step 3: Update Form Submission

You can do it by a custom function (button type) or with the submit feature:

// With type="button" and (click)="onSubmitWeatherQuery()"
protected onSubmitWeatherQuery(): void {
  if (!this.weatherForm().valid()) {
    this._markAllFieldsAsTouched();
    return;
  }

const formData = this._weatherData();
  const query = this._buildWeatherQuery(formData);
  this._addUserMessage(query);
  this._sendMessageToAI(query);
}
private _markAllFieldsAsTouched(): void {
  this.weatherForm.date().markAsTouched();
  this.weatherForm.country().markAsTouched();
  this.weatherForm.city().markAsTouched();
  this.weatherForm.temperatureUnit().markAsTouched();
}

// With (submit)="onSubmit($event)" and type="submit" on the button
protected readonly onSubmit = submit(this.weatherForm, (data) => {
  const query = this._buildWeatherQuery(data);
  this._addUserMessage(query);
  this._sendMessageToAI(query);
});

Dynamic Signal Form Arrays — Source Code

Real-world applications often require managing collections of data. In our Weather Assistant, we might want users to query multiple locations simultaneously. Signal Forms handles dynamic arrays elegantly through the applyEach function, which applies validation schemas to each array element.

Implementing Multi-Location Support

Let’s extend our weather application to support multiple locations. First, we’ll refactor the data model:

Updated Type Definitions:

type WeatherLocation = {
  city: string;
  country: string;
};

type WeatherFormData = {
  date: string;
  locations: WeatherLocation[]; // Array instead of single city/country
  temperatureUnit: TemperatureUnit;
};

Modified Component (weather-chatbot.component.ts):

@Component({
  selector: 'app-weather-chatbot',
  templateUrl: ‘./weather-chatbot.component.html’,
  imports: [CommonModule, Control, JsonPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WeatherChatbotComponent {
  // Update data model to use locations array
  private readonly _weatherData = signal<WeatherFormData>({
    date: new Date().toISOString().split(’T’)[0],
    locations: [{ city: ‘’, country: ‘’ }], // Start with one location
    temperatureUnit: ‘celsius’,
  });

  // Apply validation to each location using applyEach
  protected readonly weatherForm = form(this._weatherData, (path) => {
    required(path.date, { message: ‘Date is required’ });

    // The key change: applyEach creates a schema for each array element
    applyEach(path.locations, (location) => {
      // ‘location’ is PathKind.Item - represents one element
      required(location.city, { message: ‘City is required’ });
      minLength(location.city, 2, { message: ‘City must be at least 2 characters’ });
      required(location.country, { message: ‘Country is required’ });
      minLength(location.country, 2, { message: ‘Country must be at least 2 characters’ });
    });

    required(path.temperatureUnit, { message: ‘Temperature unit is required’ });
  });

  // Add new location to the array
  protected addLocation(): void {
    this._weatherData.update(data => ({
      ...data,
      locations: [...data.locations, { city: ‘’, country: ‘’ }]
    }));
  }

  // Remove location by index
  protected removeLocation(index: number): void {
    this._weatherData.update(data => ({
      ...data,
      locations: data.locations.filter((_, i) => i !== index)
    }));
  }

  // Update to mark all location fields as touched
  private _markAllFieldsAsTouched(): void {
    this.weatherForm.date().markAsTouched();
    this.weatherForm.temperatureUnit().markAsTouched();

    // Iterate through array fields
    for (const location of this.weatherForm.locations) {
      location.city().markAsTouched();
      location.country().markAsTouched();
    }
  }

  // Update query builder to handle multiple locations
  private _buildWeatherQuery(data: WeatherFormData): string {
    const date = new Date(data.date).toLocaleDateString(’en-US’, {
      weekday: ‘long’,
      year: ‘numeric’,
      month: ‘long’,
      day: ‘numeric’,
    });

    const unit = data.temperatureUnit === ‘celsius’ ? ‘°C’ : ‘°F’;

    // Format multiple locations
    const locationsList = data.locations
      .map(loc => `${loc.city}, ${loc.country}`)
      .join(’ and ‘);

    return `What’s the weather forecast for ${locationsList} on ${date}? Please provide the temperature in ${unit}.`;
  }
}

Template Changes

The template uses Angular’s @for to iterate over the locations array. Each location gets its own set of fields bound to the corresponding array element:

<!-- Locations Array -->
<div class=”space-y-3”>
  <label class=”block text-sm font-medium text-gray-700”>Locations</label>

  @for (location of weatherForm.locations; track $index; let i = $index) {
    <div class=”border border-gray-200 rounded-lg p-3 space-y-3”>
      <div class=”flex justify-between items-center”>
        <span class=”text-sm font-medium text-gray-600”>Location {{ i + 1 }}</span>
        @if (weatherForm.locations.length > 1) {
          <button 
            type=”button”
            (click)=”removeLocation(i)”
            class=”text-red-600 hover:text-red-700 text-sm”
          >
            Remove
          </button>
        }
      </div>

      <!-- City Field -->
      <div>
        <label [attr.for]=”’city-’ + i” class=”block text-xs font-medium text-gray-600 mb-1”>
          City
        </label>
        <input
          [id]=”’city-’ + i”
          type=”text”
          [control]=”weatherForm.locations[i].city”
          placeholder=”e.g., New York”
          class=”w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500”
        />
        @if (shouldShowErrors(weatherForm.locations[i].city().errors(), 
                              weatherForm.locations[i].city().touched())) {
          @for (error of weatherForm.locations[i].city().errors(); track error) {
            <p class=”text-red-500 text-xs mt-1”>{{ error.message }}</p>
          }
        }
      </div>

      <!-- Country Field -->
      <div>
        <label [attr.for]=”’country-’ + i” class=”block text-xs font-medium text-gray-600 mb-1”>
          Country
        </label>
        <input
          [id]=”’country-’ + i”
          type=”text”
          [control]=”weatherForm.locations[i].country”
          placeholder=”e.g., United States”
          class=”w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500”
        />
        @if (shouldShowErrors(weatherForm.locations[i].country().errors(), 
                              weatherForm.locations[i].country().touched())) {
          @for (error of weatherForm.locations[i].country().errors(); track error) {
            <p class=”text-red-500 text-xs mt-1”>{{ error.message }}</p>
          }
        }
      </div>
    </div>
  }

  <button
    type=”button”
    (click)=”addLocation()”
    class=”w-full border-2 border-dashed border-gray-300 rounded-lg p-3 text-gray-600 hover:border-blue-500 hover:text-blue-600 text-sm”
  >
    + Add Another Location
  </button>
</div>

Real-World Weather API Example — Source Code

// Validate city exists using weather API
validateAsync(location.city, {
        params: (ctx) => {
          const city = ctx.value();
          const country = ctx.fieldOf(location.country)().value();

          if (!city || city.length < 2 || !country || country.length < 2) {
            return undefined;
          }

          return { city, country };
        },

        factory: (params) => {
          return rxResource({
            params,
            stream: (p) => {
              if (!p.params) return of(null);

              const { city, country } = p.params;
              const cacheKey = this._getCacheKey(city, country);

              // Check cache first
              if (this._cityValidationCache.has(cacheKey)) {
                console.log(`Using cached result for ${cacheKey}`);
                return of(this._cityValidationCache.get(cacheKey));
              }

              const apiKey = this._config.get(’WEATHER_API_KEY’);
              const url = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${encodeURIComponent(
                city
              )},${encodeURIComponent(country)}`;

              return of(null).pipe(
                delay(2000),
                switchMap(() => this._http.get(url)),
                tap((results) => {
                  // Store in cache after successful fetch
                  this._cityValidationCache.set(cacheKey, results);
                })
              );
            },
          });
        },
        errors: (results, ctx) => {
          console.log(results);
          if (!results || results.length === 0) {
            return customError({
              kind: ‘city_not_found’,
              message: `Could not find “${ctx.value()}” in weather database`,
            });
          }

          const exactMatch = results.some(
            (r: any) =>
              r.name.toLowerCase() === ctx.value().toLowerCase() &&
              r.country.toLowerCase() === ctx.fieldOf(location.country)().value().toLowerCase()
          );

          if (!exactMatch) {
            return customError({
              kind: ‘city_country_mismatch’,
              message: `”${ctx.value()}” does not exist in ${ctx
                .fieldOf(location.country)()
                .value()}`,
            });
          }
          return null;
        },
      });

Async Validator Behavior

Only runs after all sync validators pass
Field shows pending() === true while async validation runs
Updates automatically when dependencies change
Can be debounced or throttled using resource options

<!-- Show pending state -->
@if (weatherForm.city().pending()) {
  <span class=”text-blue-500 text-xs”>Verifying city...</span>
}

@if (weatherForm.city().errors().length > 0) {
  @for (error of weatherForm.city().errors(); track error) {
    <p class="text-red-500 text-xs">{{ error.message }}</p>
  }
}

Cross-Field Validation with validate() - Source Code

Validate relationships between sibling fields by validating a parent:

validate(path, (ctx) => {
  const locations = ctx.value().locations;

  if (locations.length === 2) {
    const [first, second] = locations;
    if (first.city === second.city && first.country === second.country) {
      return customError({
        kind: ‘same_locations’,
        message: ‘Locations must be different’
      });
    }
  }

  return null;
});

Tree Validators with validateTree() — Source Code

While validate() works well for single-field validation and simple cross-field checks, it has a critical limitation: errors can only be assigned to the field being validated. When you need to validate relationships across multiple fields and target errors to specific locations in your form tree, validateTree() is the solution.

With validate(), you can detect duplicates, but the error appears on the parent field:

// Using validate() - error shows on the root form, not specific fields
validate(path, (ctx) => {
  const locations = ctx.value().locations;
  // ... duplicate detection logic
  return customError({
    kind: ‘duplicate_location’,
    message: ‘You have duplicate locations’
    // Error appears on the form root, not helpful for users
  });
});

With validateTree(), you can target errors to the exact duplicate fields:

// Using validateTree() - errors appear on duplicate city fields
validateTree(path, (ctx) => {
  const errors: any[] = [];
  const locations = ctx.value().locations;

  locations.forEach((location, index) => {
    const city = location.city.valueOf();
    const country = location.country.valueOf();

    if (!city || !country) return; // Skip empty values

    locations.forEach((otherLocation, otherIndex) => {
      if (index !== otherIndex) {
        if (
          city === otherLocation.city.valueOf() &&
          country === otherLocation.country.valueOf()
        ) {
          errors.push({
            kind: ‘duplicate_location’,
            field: ctx.field.locations[index].city, // Target specific field!
            message: `Duplicate location: ${city}, ${country}`,
          });
        }
      }
    });
  });

  return errors.length > 0 ? errors : null;
});

Standard Schema Integration with Zod — Source Code

As applications grow, maintaining consistent validation rules across client and server becomes challenging. Signal Forms addresses this with validateStandardSchema(), allowing integration with popular schema validation libraries like Zod, Yup, and Valibot. This section demonstrates Zod integration in our weather application.

Why Standard Schema Validation?

While Signal Forms’ built-in validators are powerful, standard schema libraries offer several advantages:

Single Source of Truth

// Define once, use everywhere
const weatherFormSchema = z.object({
  date: z.string().min(1),
  city: z.string().min(2).max(50),
  // ... share between client and server
});

Type Inference

// TypeScript types automatically generated from schema
type WeatherFormData = z.infer<typeof weatherFormSchema>;

Setting Up Zod Schemas

First, install Zod:

npm install zod

Create a dedicated file for your schemas:

weather-form.schemas.ts

import { z } from ‘zod’;

export const weatherLocationSchema = z.object({
  city: z.string()
    .min(2, 'City must be at least 2 characters')
    .max(50, 'City name is too long'),
  country: z.string()
    .min(2, 'Country must be at least 2 characters')
    .max(50, 'Country name is too long')
});
export const weatherFormSchema = z.object({
  date: z.string()
    .min(1, 'Date is required')
    .refine((date) => {
      const selectedDate = new Date(date);
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      return selectedDate >= today;
    }, {
      message: 'Date cannot be in the past'
    }),
  locations: z.array(weatherLocationSchema)
    .min(1, 'At least one location is required')
    .max(5, 'Maximum 5 locations allowed'),
  temperatureUnit: z.enum(['celsius', 'fahrenheit'], {
    errorMap: () => ({ message: 'Temperature unit is required' })
  })
});

Integration with Signal Forms (Hybrid Approach with Zod)

import { validateStandardSchema } from ‘@angular/forms/signals’;
import { weatherFormSchema } from ‘./weather-form.schemas’;

protected readonly weatherForm = form(this._weatherData, (path) => {
  // Single line replaces all basic validation!
  validateStandardSchema(path, weatherFormSchema);

  // Keep custom validators for Angular-specific logic
  applyEach(path.locations, (location) => {
    // Async validation for API calls
    validateAsync(location.city, {
      params: (ctx) => {
        const city = ctx.value();
        const country = ctx.fieldOf(location.country)().value();
        if (!city || city.length < 2 || !country || country.length < 2) {
          return undefined;
        }
        return { city, country };
      },
      factory: (params) => {
        return rxResource({
          params,
          stream: (p) => {
            if (!p.params) return of(null);
            const { city, country } = p.params;
            const apiKey = this._config.get('WEATHER_API_KEY');
            const url = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${city},${country}`;
            return this._http.get(url);
          },
        });
      },
      errors: (results, ctx) => {
        if (!results || results.length === 0) {
          return customError({
            kind: 'city_not_found',
            message: `Could not find "${ctx.value()}" in weather database`,
          });
        }
        return null;
      },
    });
  });
  // Tree validation for complex cross-field logic
  validateTree(path, (ctx) => {
    const errors: any[] = [];
    const locations = ctx.value().locations;
    locations.forEach((location, index) => {
      const city = location.city.valueOf();
      const country = location.country.valueOf();
      if (!city || !country) return;
      locations.forEach((otherLocation, otherIndex) => {
        if (index !== otherIndex) {
          if (
            city === otherLocation.city.valueOf() &&
            country === otherLocation.country.valueOf()
          ) {
            errors.push({
              kind: 'duplicate_location',
              field: ctx.field.locations[index].city,
              message: `Duplicate location: ${city}, ${country}`,
            });
          }
        }
      });
    });
    return errors.length > 0 ? errors : null;
  });
});

The integration between Signal Forms and standard schema libraries like Zod demonstrates Angular’s commitment to interoperability and developer choice, allowing you to build robust forms using the tools you prefer.

Schema Functions: Building Reusable Form Logic — Source Code

A schema is a reusable validation blueprint that encapsulates all the rules, logic, and constraints for a particular data structure. Think of it as a template that can be applied to any compatible field in your form tree.

Inline Schema vs. Schema Function

// Inline: Validation defined directly in the form
const myForm = form(signal(data), (path) => {
  required(path.city);
  minLength(path.city, 2);
  required(path.country);
  minLength(path.country, 2);
});

// Schema Function: Reusable validation logic
const locationSchema = schema<WeatherLocation>((path) => {
  required(path.city);
  minLength(path.city, 2);
  required(path.country);
  minLength(path.country, 2);
});
// Apply the schema anywhere
const myForm = form(signal(data), (path) => {
  apply(path, locationSchema);
});

Creating Basic Schemas

Let’s build schemas for our weather application, starting simple and progressing to complex patterns.

Simple Field Schema

import { schema, required, minLength, maxLength } from ‘@angular/forms/signals’;

// Schema for a single city name
const cityNameSchema = schema<string>((path) => {
  required(path, { message: 'City is required' });
  minLength(path, 2, { message: 'City must be at least 2 characters' });
  maxLength(path, 50, { message: 'City name is too long' });
});

// Apply to a field
form(signal({ city: '' }), (path) => {
  apply(path.city, cityNameSchema);
});

Object Schema

type WeatherLocation = {
  city: string;
  country: string;
};

const locationSchema = schema<WeatherLocation>((path) => {
  // Validate city field
  required(path.city, { message: 'City is required' });
  minLength(path.city, 2, { message: 'City must be at least 2 characters' });
  maxLength(path.city, 50, { message: 'City name is too long' });

  // Validate country field
  required(path.country, { message: 'Country is required' });
  minLength(path.country, 2, { message: 'Country must be at least 2 characters' });
  maxLength(path.country, 50, { message: 'Country name is too long' });
});

// Use it
form(signal<WeatherLocation>({ city: '', country: '' }), (path) => {
  apply(path, locationSchema);
});

Schema Composition: Building Complex Schemas from Simple Ones

One of the most powerful features of schemas is composition — building complex validation from smaller, reusable pieces.

// weather-form.schemas.ts
import { 
  schema, 
  required, 
  minLength, 
  maxLength, 
  validate,
  customError,
  apply,
  applyEach
} from ‘@angular/forms/signals’;

// 1. Atomic schemas - smallest reusable units
const cityNameSchema = schema<string>((path) => {
  required(path, { message: ‘City is required’ });
  minLength(path, 2, { message: ‘City must be at least 2 characters’ });
  maxLength(path, 50, { message: ‘City name is too long’ });
});

const countryNameSchema = schema<string>((path) => {
  required(path, { message: ‘Country is required’ });
  minLength(path, 2, { message: ‘Country must be at least 2 characters’ });
  maxLength(path, 50, { message: ‘Country name is too long’ });
});

// 2. Composite schema - combines atomic schemas
export const locationSchema = schema<WeatherLocation>((path) => {
  apply(path.city, cityNameSchema);
  apply(path.country, countryNameSchema);
});

// 3. Array schema with composite validation
export const locationsArraySchema = schema<WeatherLocation[]>((path) => {
  // Validate array itself
  validate(path, (ctx) => {
    if (ctx.value().length === 0) {
      return customError({
        kind: ‘empty_array’,
        message: ‘At least one location is required’
      });
    }
    if (ctx.value().length > 5) {
      return customError({
        kind: ‘too_many’,
        message: ‘Maximum 5 locations allowed’
      });
    }
    return null;
  });

  // Apply location schema to each item
  applyEach(path, locationSchema);
});

// 4. Date validation schema
export const futureDateSchema = schema<string>((path) => {
  required(path, { message: ‘Date is required’ });

  validate(path, (ctx) => {
    const selectedDate = new Date(ctx.value());
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    if (selectedDate < today) {
      return customError({
        kind: ‘past_date’,
        message: ‘Date cannot be in the past’
      });
    }

    const maxDate = new Date();
    maxDate.setDate(maxDate.getDate() + 14);

    if (selectedDate > maxDate) {
      return customError({
        kind: ‘far_future’,
        message: ‘Weather forecasts only available for the next 14 days’
      });
    }

    return null;
  });
});

// 5. Temperature unit schema
export const temperatureUnitSchema = schema<TemperatureUnit>((path) => {
  required(path, { message: ‘Temperature unit is required’ });

  validate(path, (ctx) => {
    const value = ctx.value();
    if (value !== ‘celsius’ && value !== ‘fahrenheit’) {
      return customError({
        kind: ‘invalid_unit’,
        message: ‘Temperature unit must be celsius or fahrenheit’
      });
    }
    return null;
  });
});

// 6. Complete form schema - orchestrates all schemas
export const weatherFormSchema = schema<WeatherFormData>((path) => {
  apply(path.date, futureDateSchema);
  apply(path.locations, locationsArraySchema);
  apply(path.temperatureUnit, temperatureUnitSchema);
});

Using Schemas in Your Component

Approach 1: Apply Complete Schema

@Component({
  selector: ‘app-weather-chatbot’,
  // ...
})
export class WeatherChatbotComponent {
  private readonly _weatherData = signal<WeatherFormData>({
    date: new Date().toISOString().split(’T’)[0],
    locations: [{ city: ‘’, country: ‘’ }],
    temperatureUnit: ‘celsius’,
  });

  protected readonly weatherForm = form(this._weatherData, (path) => {
    // Single line applies all validation
    apply(path, weatherFormSchema);

    // Add custom validators on top
    applyEach(path.locations, (location) => {
      validateAsync(location.city, {
        // ... async validation
      });
    });

    validateTree(path, (ctx) => {
      // ... duplicate detection
    });
  });
}

Approach 2: Apply Partial Schemas

protected readonly weatherForm = form(this._weatherData, (path) => {
  // Pick and choose which schemas to apply
  apply(path.date, futureDateSchema);
  apply(path.locations, locationsArraySchema);
  apply(path.temperatureUnit, temperatureUnitSchema);

  // Add inline validation for specific needs
  validate(path, (ctx) => {
    // Custom form-level validation
  });
});

Approach 3: Conditional Schema Application

protected readonly weatherForm = form(this._weatherData, (path) => {
  apply(path.date, futureDateSchema);

  // Apply different validation based on mode
  if (this.isPremiumUser()) {
    // Premium users can add more locations
    apply(path.locations, premiumLocationsArraySchema);
  } else {
    apply(path.locations, locationsArraySchema);
  }

  apply(path.temperatureUnit, temperatureUnitSchema);
});

Advanced Schema Patterns

Parametric Schemas

Create schemas that accept configuration:

// Schema factory that accepts parameters
function createLocationLimitSchema(min: number, max: number) {
  return schema<WeatherLocation[]>((path) => {
    validate(path, (ctx) => {
      const length = ctx.value().length;

      if (length < min) {
        return customError({
          kind: ‘too_few’,
          message: `At least ${min} location${min > 1 ? ‘s’ : ‘’} required`
        });
      }

      if (length > max) {
        return customError({
          kind: ‘too_many’,
          message: `Maximum ${max} locations allowed`
        });
      }

      return null;
    });

    applyEach(path, locationSchema);
  });
}

// Use with different limits
const freeUserForm = form(data, (path) => {
  apply(path.locations, createLocationLimitSchema(1, 3));
});

const premiumUserForm = form(data, (path) => {
  apply(path.locations, createLocationLimitSchema(1, 10));
});

Conditional Validation Schemas

type WeatherQuery = {
  searchType: ‘current’ | ‘forecast’;
  date?: string;
  locations: WeatherLocation[];
};

const currentWeatherSchema = schema<WeatherQuery>((path) => {
  apply(path.locations, locationsArraySchema);

  // Date should be hidden/ignored for current weather
  hidden(path.date);
});

const forecastWeatherSchema = schema<WeatherQuery>((path) => {
  apply(path.locations, locationsArraySchema);
  apply(path.date, futureDateSchema);
});

// Apply conditionally
protected readonly weatherForm = form(this._weatherData, (path) => {
  applyWhenValue(
    path,
    (value): value is Extract<WeatherQuery, { searchType: ‘current’ }> =>
      value.searchType === ‘current’,
    currentWeatherSchema
  );

  applyWhenValue(
    path,
    (value): value is Extract<WeatherQuery, { searchType: ‘forecast’ }> =>
      value.searchType === ‘forecast’,
    forecastWeatherSchema
  );
});

Schema vs. Inline: When to Use Each

Use Schemas When:

Validation logic is shared across multiple forms
Testing validation logic independently
Building a validation library for your organization
Complex nested structures benefit from composition
Team needs clear documentation of validation rules

Use Inline When:

Validation is unique to a single form
Quick prototyping or simple forms
Validation tightly coupled to component state
One-off forms that won’t be reused

Schemas transform Signal Forms from a validation tool into a scalable validation architecture, enabling teams to build maintainable, testable, and reusable form logic across their entire application.

Conclusion

Signal Forms is currently experimental in Angular 21.

Throughout this guide, we’ve transformed a real-world weather chatbot application, demonstrating how Signal Forms addresses pain points at every level:

Reduced Complexity : What once required FormBuilder, FormGroup, and manual subscription management now distills into a single form() function bound to a signal. The verbose template logic with repeated weatherForm.get() calls becomes clean, type-safe field navigation.

Enhanced Validation : From basic built-in validators to async API validation with validateAsync(), cross-field logic with validateTree(), and standard schema integration with Zod—Signal Forms provides a complete validation toolkit that scales from simple forms to complex, multi-step workflows.

Composable Architecture : The schema() function enables building reusable validation blueprints that can be tested independently, shared across teams, and composed into sophisticated validation hierarchies. This modularity transforms validation from scattered logic into maintainable, documented architecture.

Performance by Default : Signals provide fine-grained reactivity without Observable overhead. OnPush change detection works naturally, and the framework only updates what changed. The result is forms that are both easier to write and faster to run.

The forms you’ll build with Signal Forms — once stable — will be simpler, faster, and more maintainable than ever before. The experimental phase is Angular’s invitation to help shape that future.

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment , clap or follow. 👏

Spread the Angular love! 💜

If you really liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

Thanks for being part of this Angular journey! 👋😁

Originally published at https://www.codigotipado.com.

Angular 20.2.0: What’s new

Amos Isaila — Thu, 21 Aug 2025 04:50:01 +0000

Angular 20.2.0 introduces cleaner templates, smarter tooling, and improved debugging as some of its new features.

1. 🔥 @angular/core

a) Support TypeScript 5.9

b) Angular Components Now Use Real Tag Names in Tests — PR

Until now, there was a subtle but important difference between how your components behaved in tests versus production:

In Production: angular creates components using tag names inferred from their selectors:

@Component({selector: 'user-profile', template: '...'})
// Creates actual <user-profile> element

In Tests (Previously): TestBed always wrapped components in generic

elements:

const fixture = TestBed.createComponent(UserProfileComponent);
// Always created <div> regardless of selector

This mismatch could hide CSS styling issues, accessibility problems, or any logic that depended on the actual element tag name.

Angular now offers the inferTagName option to align test behavior with production:

// Option 1: Per-component basis
const fixture = TestBed.createComponent(UserProfileComponent, {
  inferTagName: true
});
// Now creates <user-profile> element in tests

// Option 2: Configure globally for all tests
TestBed.configureTestingModule({
  inferTagName: true,
  // ... other config
});
@Component({selector: 'my-button'}) 
// → Creates <my-button>
@Component({selector: 'custom-input[type="text"]'}) 
// → Creates <custom-input>
@Component({selector: '[data-widget]'}) 
// → Falls back to <div> (no tag name in selector)
@Component({template: '...'}) 
// → Creates <ng-component> (no selector)

c) Property-to-Attribute Mapping — PR

Previously, developers faced a choice between verbose syntax and potential SSR problems when working with ARIA attributes:

// Verbose but SSR-safe
<button [attr.aria-label]="buttonText">

// Clean but potential SSR issues  
<button [ariaLabel]="buttonText">

The problem: ARIA DOM properties don’t always correctly reflect as HTML attributes during server-side rendering, potentially breaking accessibility for users with assistive technologies.

Angular now supports clean property binding syntax that automatically renders as proper HTML attributes:

// All of these now work identically and render correctly on SSR
<button [aria-label]="buttonText"> // New simplified syntax
<button [ariaLabel]="buttonText"> // Existing camelCase
<button [attr.aria-label]="buttonText"> // Explicit attribute binding

The enhancement includes intelligent mapping for all standard ARIA properties:

@Component({
  template: `
    <div [ariaLabel]="label"
         [ariaExpanded]="isExpanded" 
         [ariaDisabled]="isDisabled"
         [aria-hidden]="isHidden">
      <!-- All render as proper aria-* attributes -->
    </div>
  `
})

Automatic conversions include:

ariaLabel → aria-label
ariaExpanded → aria-expanded
ariaHasPopup → aria-haspopup
Plus 30+ other ARIA properties

The system intelligently prioritizes component inputs over attribute binding:

@Component({
  selector: 'custom-button'
})
class CustomButton {
  @Input() ariaLabel!: string; // This takes precedence
}

// Binds to component input, not HTML attribute
<custom-button [ariaLabel]="text">

This feature particularly shines in SSR scenarios where proper attribute rendering is crucial for accessibility:

// Server renders: <button aria-label="Save Document">
// Client hydrates seamlessly with identical markup
<button [aria-label]="saveLabel">

d) Promote zoneless to stable

As of Angular v20.2, Zoneless (provideZonelessChangeDetection) Angular is now stable and includes improvements in error handling and server-side rendering.

e) Control Flow Enhancement: as Aliases in @else if Blocks - PR

<!-- ✅ Enhanced: as works in @else if blocks -->
@if (user$ | async; as user) {
  <h1>Welcome, {{user.name}}</h1>
  <p>Role: {{user.role}}</p>
} @else if (userRole$ | async; as role) {
  <!-- 🎉 Now we can use 'as' here too! -->
  <p>Loading user data for {{role}}...</p>
  <p>Please wait while we fetch your {{role}} profile...</p>
} @else {
  <p>Please log in</p>
}

2. 🔥 @angular/common/http

a) Add referrer & integrity support for fetch requests in httpResource — PR

Currently, Angular’s httpResource does not expose the referrer and integrity options from the underlying Fetch API.

Exposing these options would provide developers with finer control over the request’s referrer and subresource integrity validation , which are important for ensuring security , privacy , and trust in critical resource fetching scenarios.

httpResource(() => ({
  url: '${CDN_DOMAIN}/assets/data.json',
  method: 'GET',
  referrer: 'no-referrer',
  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY='
}));

b) New redirected Property - PR

Angular’s HttpClient now provides complete visibility into HTTP redirects with a new redirected property that aligns with the native Fetch API.

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getUserProfile(userId: string) {
    return this.http.get(`/api/users/${userId}`, { 
      observe: 'response' 
    }).pipe(
      tap(response => {
        if (response.redirected) {
          console.log('User profile request was redirected');
          console.log('Original URL:', `/api/users/${userId}`);
          console.log('Final URL:', response.url);

          // Track redirect for analytics
          this.trackRedirect('user-profile', response.url);
        }
      }),
      map(response => response.body)
    );
  }

  private trackRedirect(endpoint: string, finalUrl: string | null) {
    // Send redirect data to analytics service
    analytics.track('http_redirect', {
      endpoint,
      finalUrl,
      timestamp: new Date().toISOString()
    });
  }
}

3. 🔥 @angular/language-service

a) Angular Language Service Now Detects Deprecated APIs in Templates — PR

export class LegacyComponent {
  /**
   * @deprecated Use newProp instead
   */
  @Input() oldProp: string;
}

<!-- Your IDE will now show a suggestion diagnostic here -->
<legacy-component [oldProp]="someValue"></legacy-component>
                   ~~~~~~~'oldProp' is deprecated. Use newProp instead

b) Auto-Import for Angular Attributes: No More Manual Directive Imports — PR

When you use directive attributes in your templates, the IDE will now automatically suggest importing the directive for you.

<!-- Type this: -->
<div appHighlight="yellow">
     ↑ 
💡 Quick Fix: Import HighlightDirective from '@app/highlight'

// Automatically added to your component:
import { HighlightDirective } from '@app/highlight';
@Component({
  imports: [HighlightDirective], // ← Added automatically!
  template: `<div appHighlight="yellow">Content</div>`
})
export class MyComponent { }

4. 🔥 @angular/service-worker

a) Take Control of Service Worker Updates: Angular’s New updateViaCache Configuration Option — PR

The new updateViaCache option allows you to specify exactly when the browser should check its HTTP cache when updating service workers or any scripts imported via importScripts(). This translates to:

Improved Performance Control : choose between 'imports', 'all', or 'none' to optimize your update strategy based on your application's specific needs.

Better Development Experience : gain more predictable behavior during development cycles, especially when testing service worker updates.

Production Optimization : fine-tune caching strategies for production deployments where update timing is critical.

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      updateViaCache: 'imports', // New cache control option
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

b) New proactive storage monitoring system that prevents cache failures before they happen — PR

The system monitors storage usage and alerts when capacity reaches 95% of the available quota:

private async detectStorageFull() {
  try {
    const estimate = await navigator.storage.estimate();
    const { quota, usage } = estimate;

    // Handle cases where quota or usage might be undefined
    if (typeof quota !== 'number' || typeof usage !== 'number') {
      return;
    }

    // Consider storage "full" if usage is >= 95% of quota
    // This provides a safety buffer before actual storage exhaustion
    const usagePercentage = (usage / quota) * 100;
    const isStorageFull = usagePercentage >= 95;

    if (isStorageFull) {
      this.debugHandler.log(
        'Storage is full or nearly full',
        `DataGroup(${this.config.name}@${this.config.version}).detectStorageFull()`,
      );
    }
  } catch {
    // Error estimating storage, possibly by unsupported browser.
  }
}

For PWA Applications

// Example of how this helps PWAs maintain offline functionality
if (storageNearFull) {
  // Implement cleanup strategies
  // Prioritize critical resources
  // Notify user about storage constraints
}

For Content-Heavy Apps

// Applications with large caching needs benefit from early warnings
if (storageApproachingLimit) {
  // Implement cache eviction policies
  // Compress cached data
  // Switch to selective caching strategies
}

Developers now get clear indicators when storage issues occur:

Storage is full or nearly full -DataGroup(api@v1.2.3).detectStorageFull()

c) Real-Time Version Failure Notifications — PR

Previously, when a Service Worker version encountered critical failures, applications would experience degraded functionality without clear visibility into the root cause. The system introduces a new VersionFailedEvent that provides comprehensive failure information:

/**
 * An event emitted when a specific version of the app has encountered a critical failure
 * that prevents it from functioning correctly.
 */
export interface VersionFailedEvent {
  type: 'VERSION_FAILED';
  version: {hash: string; appData?: object};
  error: string;
}

Automatic Client Notification

When a version fails, the Service Worker automatically notifies all affected clients. Applications can listen for version failures using the existing SwUpdate service:

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      @if (versionError()) {
        <div class="error-banner">
          <h3>Application Update Issue</h3>
          <p>{{versionError()}}</p>
          <button (click)="handleVersionFailure()">
            Refresh Application
          </button>
        </div>
      }

      <router-outlet />
    </div>
  `,
  styles: [`
    .error-banner {
      background: #fee;
      border: 1px solid #fcc;
      border-radius: 4px;
      padding: 16px;
      margin: 8px;
      color: #c66;
    }

    .error-banner button {
      background: #c66;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 8px;
    }
  `]
})
export class AppComponent implements OnInit {
  versionError = signal<string | null>(null);

  constructor(private swUpdate: SwUpdate) {}

  ngOnInit() {
    // Listen for all version events
    this.swUpdate.versionUpdates.subscribe(event => {
      switch (event.type) {
        case 'VERSION_FAILED':
          this.handleVersionFailure(event);
          break;
        case 'VERSION_READY':
          this.handleVersionReady(event);
          break;
        case 'VERSION_DETECTED':
          this.handleVersionDetected(event);
          break;
      }
    });
  }

  private handleVersionFailure(event: VersionFailedEvent) {
    console.error('Service Worker version failed:', event);

    // Set user-friendly error message
    this.versionError.set(
      `Application version ${event.version.hash.substring(0, 8)} has encountered an error. ` +
      `Please refresh to restore full functionality.`
    );

    // Optional: Report to error monitoring service
    this.reportVersionFailure(event);
  }

  private handleVersionReady(event: VersionReadyEvent) {
    // Clear any previous errors when new version is ready
    this.versionError.set(null);
    console.log('New version ready:', event.latestVersion.hash);
  }

  private handleVersionDetected(event: VersionDetectedEvent) {
    console.log('New version detected:', event.latestVersion.hash);
  }

  handleVersionFailure() {
    // Force page reload to get latest version
    window.location.reload();
  }

  private reportVersionFailure(event: VersionFailedEvent) {
    // Example: Send to monitoring service
    // errorService.report({
    // type: 'service-worker-version-failure',
    // version: event.version.hash,
    // error: event.error,
    // userAgent: navigator.userAgent,
    // timestamp: new Date().toISOString()
    // });
  }
}

Testing the Feature

The new functionality includes comprehensive test coverage:

it('processes version failed events with cache corruption error', (done) => {
  update.versionUpdates.subscribe((event) => {
    expect(event.type).toEqual('VERSION_FAILED');
    expect((event as VersionFailedEvent).version).toEqual({
      hash: 'B',
      appData: {name: 'test-app'},
    });
    expect((event as VersionFailedEvent).error).toContain('Cache corruption detected');
    done();
  });

  mock.sendMessage({
    type: 'VERSION_FAILED',
    version: {
      hash: 'B',
      appData: {name: 'test-app'},
    },
    error: 'Cache corruption detected during resource fetch',
  });
});

d) Better Service Worker Debugging: Angular Now Catches Message Errors — PR

When Service Workers receive corrupted or badly formatted messages, they would previously fail silently. Instead of silent failures, you now get clear logs when messages fail:

[SW] Message error occurred - data could not be deserialized
[SW] Driver.onMessageError(origin: https://myapp.com)

e) Modern Service Workers: Angular Adds ES Module Support — PR

Angular Service Workers now support ES modules with a new type configuration option, bringing modern JavaScript features like import and export to your Service Worker scripts.

// Enable ES modules in Service Workers
export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      type: 'module', // Enable ES module features
      scope: '/app',
      updateViaCache: 'imports'
    }),
  ],
};

f) Service Worker Error Handling: unhandled promise rejections — PR

Unhandled promise rejections happen when a Promise fails but there’s no .catch() block or error handling to deal with it:

// Before: Silent failure scenario
class DataSyncService {
  syncUserPreferences() {
    // This could fail silently if the API is down
    fetch('/api/sync-preferences', {
      method: 'POST',
      body: JSON.stringify(this.preferences)
    })
    .then(response => response.json())
    .then(result => {
      // Update local cache
      this.updateLocalCache(result);
    });
    // No .catch() - failures would be silent!
  }
}

// After: With the new logging, you'd see in DevTools:
// "Unhandled promise rejection occurred: NetworkError: Failed to fetch"

5. 🔥 @angular/compiler-cli

a) Smart Template Diagnostics: Catch Function Reference Mistakes Before Runtime — PR

How many times have you written something like this and wondered why it displays [Function] instead of the actual value?

@Component({
  template: `<p>Welcome {{ getUserName }}</p>` // Missing parentheses!
})
class WelcomeComponent {
  getUserName(): string {
    return 'Sarah';
  }
}

The Solution: NG8117 Diagnostic

Angular now automatically detects this pattern and shows a clear warning:

❌ Before: Silent runtime behavior displaying [Function]

✅ Now: Compile-time warning with diagnostic NG8117

6. 🔥 @angular/animations

Say goodbye to @angular/animations (60KB bundle impact) and hello to native CSS animations with animate.enter and animate.leave in Angular 20.2!

7. 🔥 @angular/forms

a) FormArray Gets Efficient Multi-Control Push Support — PR

Previously, adding multiple controls to a FormArray required individual push() calls, each triggering change detection and validation events:

// Old approach - inefficient for large datasets
const formArray = new FormArray([]);
const newControls = [
  new FormControl('value1'),
  new FormControl('value2'),
  new FormControl('value3'),
  // ... potentially hundreds more
];

// Each push triggers valueChanges, statusChanges, and validation
newControls.forEach(control => {
  formArray.push(control); // Triggers events every time!
});

The push() method now supports both individual and batch operations:

// Before: Only single controls
push(control: TControl, options?: { emitEvent?: boolean }): void

// After: Single controls OR arrays of controls  
push(control: TControl | Array<TControl>, options?: { emitEvent?: boolean }): void

8. 🔥 @angular/router

a) Router Goes Reactive: New currentNavigation Signal Replaces Deprecated Method - PR

// Old approach - complex and inefficient
export class App {
  private router = inject(Router);

  // Required complex Observable setup
  isNavigating = toSignal(this.router.events.pipe(
    map(() => !!this.router.getCurrentNavigation()) // Deprecated method
  ));

  // Manual state checking
  checkNavigationState() {
    const nav = this.router.getCurrentNavigation(); // Deprecated
    return nav ? 'Navigating...' : 'Idle';
  }
}

// New approach - simple and reactive
export class App {
  private router = inject(Router);

  // Clean, reactive navigation state
  isNavigating = computed(() => !!this.router.currentNavigation());

  // Derive any navigation state reactively
  navigationState = computed(() => {
    const nav = this.router.currentNavigation();
    return nav ? 'Navigating...' : 'Idle';
  });
}

9. 🔥 @angular/platform-browser

a) Warns About Hydration and Blocking Navigation Conflicts — PR

When building Angular applications with server-side rendering (SSR), developers sometimes unknowingly combine features that don’t work well together:

// This configuration causes subtle runtime issues
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(), // Enable hydration
    provideRouter(routes, 
      withEnabledBlockingInitialNavigation() // Enable blocking navigation
    )
  ]
});

// Console output:
// ⚠️ Configuration error: found both hydration and enabledBlocking initial navigation 
// in the same application, which is a contradiction.

b) Angular Introduces IsolatedShadowDom Encapsulation - PR

Ever tried building a reusable component only to have it break when used in different projects?:

// Your beautiful blue button component
@Component({
  template: '<button class="btn">Click me</button>',
  styles: ['.btn { background: blue; color: white; }'],
  encapsulation: ViewEncapsulation.ShadowDom
})

/* Their global styles */
.btn { background: red !important; }

Your blue button becomes red! 😱 Shadow DOM was supposed to prevent this, but Angular’s implementation leaked. The solution:

// Now with TRUE isolation
@Component({
  template: '<button class="btn">Click me</button>',
  styles: ['.btn { background: blue; color: white; }'],
  encapsulation: ViewEncapsulation.IsolatedShadowDom // 🎉
})

// Result: Your button stays blue EVERYWHERE! 💙

When to Choose Each Mode

Use ViewEncapsulation.ShadowDom when:

You need backwards compatibility with existing applications
You want some global styles to be available in your component
You’re gradually migrating to Shadow DOM

Use ViewEncapsulation.IsolatedShadowDom when:

Building reusable component libraries
Creating embeddable widgets for third-party sites
Need guaranteed style isolation
Following web standards precisely
Building micro-frontends that must be completely isolated

10. 🔥 @angular/cli

a) New Angular MCP features

Angular CLI just added powerful AI integration capabilities through MCP (Model Context Protocol) server functionality.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment , clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

Thanks for being part of this Angular journey! 👋😁

Originally published at https://www.codigotipado.com.

Angular CLI 20.2 Meets AI: The Complete Guide to MCP Integration

Amos Isaila — Mon, 18 Aug 2025 05:54:16 +0000

How Angular just revolutionized AI-assisted development with Model Context Protocol.

Angular CLI 20.2 quietly introduced something that could fundamentally change how we develop Angular applications: Model Context Protocol (MCP) server functionality. If you’re wondering what this means and why it matters, you’re in the right place.

If you want to learn more about the beginning of the MCP servers and how Angular integrated its own, you can do it here.

Angular development involves complex migrations, best practices, and architectural decisions. The Angular team recognized that AI could significantly help with:

Code Modernization — Automatically suggesting and applying the latest Angular patterns
Migration Guidance — Step-by-step assistance for complex framework updates
Best Practice Enforcement — Real-time suggestions for better code patterns
Documentation Integration — Contextual help based on your actual code

The New Angular MCP Features: Deep Dive

1. The modernize Tool - Your AI Migration Assistant

The modernize tool gives AI assistants comprehensive knowledge about Angular migrations and the ability to guide you through them.

Available Transformations:

Control Flow Migration
Signal Input/Output Migration
Standalone Migration (3-Step Process) The AI assistant now understands this is a multi-step process and guides you through each phase:

Convert Components : ng g @angular/core:standalone → "Convert all components, directives and pipes to standalone"
Remove NgModules : ng g @angular/core:standalone → "Remove unnecessary NgModule classes"
Bootstrap Update : ng g @angular/core:standalone → "Bootstrap the project using standalone APIs"

How AI Uses This Information:

# AI can now have conversations like this:
AI: "I notice you're using *ngIf and *ngFor in your templates. 
     Would you like me to migrate them to the new control flow syntax?"

Developer: "Yes, but just for the user components"

AI: "I'll run the control flow migration. This will update your templates 
     to use @if and @for blocks, which offer better performance and type safety."

# AI executes: ng generate @angular/core:control-flow-migration

3. Security Controls — Three Levels of AI Access

Angular CLI provides granular control over what AI can access and modify:

a) Read-Only Mode (--read-only)

ng mcp --read-only

What AI Can Do:

Analyze your code structure
Suggest improvements
Provide documentation
Answer questions about your codebase

What AI Cannot Do:

Modify any files
Run migrations
Execute commands that change your workspace

Perfect for:

Code reviews
Architecture analysis
Learning and education
Untrusted AI tools

b) Local-Only Mode (--local-only)

ng mcp --local-only

What This Enables:

Complete offline operation
No external API calls
Local analysis only
Air-gapped development environments

Use Cases:

Corporate environments with internet restrictions
Sensitive projects requiring offline development
Compliance with data residency requirements

c) Experimental Tools (--experimental-tool or -E)

Think of experimental tools as “beta features” that Angular is still testing. They work, but they might change in future versions.

# Enable the modernize tool (currently experimental)
ng mcp --experimental-tool modernize
ng mcp -E modernize

# Enable multiple experimental tools
ng mcp -E modernize -E future-feature

Why This Matters:

Safe testing of features
Opt-in to capabilities
Feedback collection for Angular team
No surprise changes to stable workflows

3. Best Practices Integration

The MCP server includes Angular’s comprehensive best practices guide that AI can reference in real-time:

// AI can now suggest improvements like:

// Your code:
@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      <app-user-card [user]="user" (click)="selectUser(user)"></app-user-card>
    </div>
  `
})
export class UserListComponent {
  @Input() users: User[] = [];
  @Output() userSelected = new EventEmitter<User>();

  selectUser(user: User) {
    this.userSelected.emit(user);
  }
}

// AI suggestion:
"I notice several modernization opportunities:
1. Convert to standalone component
2. Use signal inputs/outputs  
3. Update to @for control flow
4. Add trackBy function for performance

Would you like me to apply these modernizations?"

Real-World Usage Scenarios

Scenario 1: Legacy Codebase Modernization

# Start MCP server with modernization tools
ng mcp --experimental-tool modernize

# AI conversation:
AI: "I've analyzed your codebase. You have 47 components using old patterns. 
     I recommend this modernization path:

     1. First, convert to standalone (affects 47 files)
     2. Then migrate to signal inputs (affects 23 components)  
     3. Finally, update control flow syntax (affects 15 templates)

     Shall we start with standalone conversion?"

Developer: "Yes, but let's do it module by module"

AI: "Great! I'll start with your SharedModule. This affects 8 components 
     and should be safe to test first..."

Scenario 2: Code Review Assistant

# Read-only mode for safe code analysis
ng mcp --read-only

# AI can now:
AI: "I've reviewed your pull request. Here are my findings:

    ✅ Good use of standalone components
    ⚠️ Consider using signal inputs in UserComponent for better performance
    ❌ Missing trackBy in the user list - this could cause performance issues
    💡 The new @if syntax would be cleaner than *ngIf here

    Would you like specific examples for any of these suggestions?"

Scenario 3: Learning and Onboarding

# Safe exploration for new team members
ng mcp --read-only

# New developer conversation:
Developer: "I'm new to Angular. Can you explain this component?"

AI: "This component uses Angular's reactive forms with signal inputs. 
     Here's what each part does:

     - `userId = input.required<string>()` creates a required signal input
     - `@if (user())` uses the new control flow syntax  
     - The form uses typed reactive forms introduced in Angular 14

     This follows current Angular best practices. Would you like me to 
     explain any specific pattern in more detail?"

Scenario 4: Enterprise Development

# Secure, offline operation for corporate environments
ng mcp --local-only --read-only

# Benefits:
# - No external API calls
# - Complete audit trail
# - Compliance with security policies
# - Still gets intelligent code analysis

Conclusion: The AI-Native Angular Future

Angular’s MCP integration represents a paradigm shift toward AI-native development. For the first time, AI assistants can truly understand and work with Angular projects in a secure, controlled manner.

Key Takeaways:

Start Safe : Begin with --read-only mode to explore capabilities
Gradual Adoption : Use experimental tools for specific tasks
Security First : Leverage local-only mode for sensitive projects
Team Benefits : Onboard new developers faster with AI assistance
Future-Ready : Position your team for the AI-assisted development era

The Angular team has built this integration thoughtfully, prioritizing security and developer control. This isn’t about replacing developers — it’s about making Angular development more intelligent, efficient, and accessible.

Ready to try AI-assisted Angular development? Start with ng mcp --read-only and experience the future of coding today.

Related Resources:

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment , clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

Thanks for being part of this Angular journey! 👋😁

Originally published at https://www.codigotipado.com.

Say Hello to Native CSS Animations and Goodbye to @angular/animations

Amos Isaila — Mon, 04 Aug 2025 17:00:31 +0000

The framework is deprecating the @angular/animations package in favor of a new approach: native CSS animations integration through animate.enter and animate.leave.

Why @angular/animations Is Being Retired

After eight years of service, @angular/animations is showing its age. Created before modern CSS features like @keyframes and hardware-accelerated transforms were widely supported, the package solved important problems, but now creates new ones:

Size Impact : the package adds approximately 60KB to your bundle size

Performance Issues : animations run in JavaScript without hardware acceleration

Learning Curve : Angular-specific API that doesn’t translate to other frameworks

Integration Friction : difficlt to use with popular third-party animation libraries like GSAP or Anime.js

Meanwhile, the web platform has evolved dramatically, offering native animation capabilities that are faster, smaller, and more widely applicable.

Meet Your New Animation System: animate.enter and animate.leave

Starting in Angular 20.2.0, two powerful new features provide everything you need for smooth, performant animations:

Basic Usage: CSS Class Application

The simplest approach applies CSS animation classes automatically:

@Component({
  template: `
    @if (showMessage()) {
      <div animate.enter="slide-in" animate.leave="fade-out">
        Welcome to the future of Angular animations!
      </div>
    }
    <button (click)="toggle()">Toggle Message</button>
  `,
  styles: [`
    .slide-in {
      animation: slideIn 0.3s ease-out;
    }

    .fade-out {
      animation: fadeOut 0.2s ease-in;
    }

    @keyframes slideIn {
      from { transform: translateY(-20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  `]
})
export class MessageComponent {
  showMessage = signal(false);

  toggle(): void {
    this.showMessage.update((v: boolean) => !v);
  }
}

Advanced Control with Animation Functions

For complex animations or third-party library integration, use function-based control:

@Component({
  template: `
    <div class="animation-playground">
      @if (showElement()) {
        <div class="animated-box"
             (animate.enter)="handleEnterAnimation($event)"
             (animate.leave)="handleLeaveAnimation($event)">
          <h3>Advanced Animation</h3>
          <p>Powered by GSAP integration</p>
        </div>
      }

      <button (click)="toggleElement()">
        {{showElement() ? 'Hide' : 'Show'}} Element
      </button>
    </div>
  `,
  styles: [`
    .animated-box {
      width: 300px;
      height: 200px;
      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      margin: 20px 0;
    }
  `]
})
export class AdvancedAnimationComponent {
  showElement = signal(false);

  handleEnterAnimation(event: AnimationCallbackEvent): void {
    // Using GSAP for complex enter animation
    gsap.fromTo(event.target, 
      {
        scale: 0,
        rotation: -180,
        opacity: 0
      },
      {
        scale: 1,
        rotation: 0,
        opacity: 1,
        duration: 0.8,
        ease: "back.out(1.7)",
        onComplete: () => {
          // Animation complete callback is automatic for enter animations
          console.log('Enter animation completed!');
        }
      }
    );
  }

  handleLeaveAnimation(event: AnimationCallbackEvent): void {
    // Complex leave animation with staggered effects
    const timeline = gsap.timeline({
      onComplete: () => {
        // Must call this to complete the removal process
        event.animationComplete();
      }
    });

    timeline
      .to(event.target, {
        scale: 1.1,
        duration: 0.1,
        ease: "power2.out"
      })
      .to(event.target, {
        scale: 0,
        rotation: 180,
        opacity: 0,
        duration: 0.5,
        ease: "power2.in"
      });
  }

  toggleElement(): void {
    this.showElement.update((v: boolean) => !v);
  }
}

Host Element Animations

Apply animations directly to component host elements:

@Component({
  selector: 'notification-card',
  template: `
    <div class="notification-content">
      <h4>{{title()}}</h4>
      <p>{{message()}}</p>
      <button (click)="dismiss()">×</button>
    </div>
  `,
  host: {
    '[animate.enter]': 'enterAnimation',
    '[animate.leave]': 'leaveAnimation',
    'class': 'notification-card'
  },
  styles: [`
    :host {
      display: block;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      padding: 16px;
      margin: 8px 0;
      max-width: 400px;
    }

    .slide-in-right {
      animation: slideInRight 0.3s ease-out;
    }

    .slide-out-right {
      animation: slideOutRight 0.3s ease-in;
    }

    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideOutRight {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }
  `]
})
export class NotificationCardComponent {
  title = input.required<string>();
  message = input.required<string>();
  type = input<'success' | 'warning' | 'error'>('success');
  autoClose = input<boolean>(true);

  dismissed = output<void>();

  enterAnimation = 'slide-in-right';
  leaveAnimation = 'slide-out-right';

  // Auto-close functionality using signals
  private autoCloseTimer = signal<ReturnType<typeof setTimeout> | null>(null);

  constructor() {
    // Set up auto-close when enabled
    effect(() => {
      if (this.autoClose()) {
        const timer = setTimeout(() => this.dismiss(), 5000);
        this.autoCloseTimer.set(timer);
      }
    });
  }

  dismiss() {
    const timer = this.autoCloseTimer();
    if (timer) {
      clearTimeout(timer);
      this.autoCloseTimer.set(null);
    }
    this.dismissed.emit();
  }
}

// Usage in parent component with signal inputs
@Component({
  template: `
    <div class="notifications">
      @for (notification of notifications(); track notification.id) {
        <notification-card 
          [title]="notification.title"
          [message]="notification.message"
          [type]="notification.type"
          [autoClose]="notification.autoClose"
          (dismissed)="removeNotification(notification.id)" />
      }
    </div>

    <div class="controls">
      <button (click)="addSuccessNotification()">Add Success</button>
      <button (click)="addWarningNotification()">Add Warning</button>
      <button (click)="addErrorNotification()">Add Error</button>
    </div>
  `,
  styles: [`
    .notifications {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }

    .controls {
      margin: 20px;
    }

    .controls button {
      margin-right: 10px;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `]
})
export class NotificationContainerComponent {
  notifications = signal<Array<{
    id: number;
    title: string;
    message: string;
    type: 'success' | 'warning' | 'error';
    autoClose: boolean;
  }>>([]);

  private nextId = signal(1);

  addSuccessNotification() {
    this.addNotification({
      title: 'Success!',
      message: 'Operation completed successfully!',
      type: 'success',
      autoClose: true
    });
  }

  addWarningNotification() {
    this.addNotification({
      title: 'Warning',
      message: 'Please review your settings.',
      type: 'warning',
      autoClose: false
    });
  }

  addErrorNotification() {
    this.addNotification({
      title: 'Error',
      message: 'Something went wrong. Please try again.',
      type: 'error',
      autoClose: false
    });
  }

  private addNotification(notificationData: Omit<any, 'id'>) {
    const newNotification = {
      id: this.nextId(),
      ...notificationData
    };

    this.nextId.update(id => id + 1);
    this.notifications.update(notifications => 
      [...notifications, newNotification]
    );
  }

  removeNotification(id: number) {
    this.notifications.update(notifications => 
      notifications.filter(n => n.id !== id)
    );
  }
}

Testing Support

Angular provides an ANIMATIONS_DISABLED token for test environments:

TestBed.configureTestingModule({
  providers: [
    { provide: ANIMATIONS_DISABLED, useValue: true }
  ]
});

When disabled, animations complete immediately while still triggering all lifecycle events.

Migration Strategy

For existing @angular/animations users, Angular provides a comprehensive migration guide. The most common patterns translate directly:

Before (Angular Animations):

@Component({
  animations: [
    trigger('slideIn', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
      ])
    ])
  ]
})

After (Native Animations):

@Component({
  template: `<div animate.enter="slide-in">`,
  styles: [`
    .slide-in {
      animation: slideIn 300ms ease-in;
    }
    @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0%); }
    }
  `]
})

The Future is Bright

This change represents more than just a new API — it’s Angular’s commitment to embracing web standards while providing the developer experience you expect. By moving to native CSS animations, Angular applications become:

Faster : hardware-accelerated animations
Smaller : no large animation runtime
More Portable : skills transfer across frameworks
More Flexible : easy third-party library integration

The animations field in component decorators is officially deprecated as of Angular 20.2 and will be removed in version 23, giving developers a clear migration timeline.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment , clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

Thanks for being part of this Angular journey! 👋😁

Originally published at https://www.codigotipado.com.

Angular CLI 20.1.0 now Includes AI Integration via Model Context Protocol!

Amos Isaila — Sun, 03 Aug 2025 23:00:43 +0000

The Angular CLI 20.1.0 now includes an experimental Model Context Protocol (MCP) server that lets AI assistants understand and work with your project.

The Dawn of the LLM Era

Large Language Models (LLMs) like ChatGPT, Claude, and Gemini have fundamentally changed how we think about software interaction. These AI systems, trained on vast amounts of text data, can understand and generate human-like responses. But here’s the thing: they’re incredibly powerful yet frustratingly isolated. They can write brilliant code, explain complex concepts, and solve problems, but they can’t do anything in your development environment.

Imagine having a brilliant coding assistant who can tell you exactly how to fix a bug but can’t see your actual codebase, can’t run your tests, and can’t understand your project structure. That’s been the reality for most AI coding tools until now.

Enter the Model Context Protocol

In November 2024, Anthropic (the company behind Claude) introduced something called the Model Context Protocol. Think of MCP as the missing bridge between AI models and the real world of development tools. It’s an open standard that allows AI systems to securely connect to external data sources, tools, and services.

Here’s what makes MCP revolutionary: instead of building custom integrations for every single tool, MCP provides a universal language that AI systems can use to communicate with any compatible service. It’s like creating a USB-C standard for AI connectivity.

The protocol caught fire quickly. By March 2025, even OpenAI (Anthropic’s biggest competitor) had adopted it. Google DeepMind followed suit in April. When fierce competitors agree on a standard this quickly, you know something big is happening.

Angular’s Smart Move

Now, here’s where Angular’s implementation gets interesting. The Angular team didn’t just add MCP support — they’ve positioned Angular as an AI-first development platform. When you run ng mcp, you're not just starting a server; you're making your entire Angular workspace available to AI systems in a structured, secure way.

The current implementation provides two key capabilities:

1. Angular Best Practices as AI Knowledge: The MCP server exposes Angular’s official best practices and coding guidelines directly to AI systems. This means when an AI is helping you code, it has immediate access to the latest Angular conventions, TypeScript patterns, and framework-specific guidance.

2. Project Structure Awareness: The server can list and understand your Angular workspace structure, reading from your angular.json file. This gives AI systems spatial awareness of your project – they know what apps and libraries you have, how they're organized, and can provide contextually relevant suggestions.

Getting Started

Run ng mcp and you'll get instructions for configuring your AI host to connect to your Angular workspace:

ng mcp

// If it's the first time, it will print this:                                                                            

To start using the Angular CLI MCP Server, add this configuration to your host:

{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["@angular/cli", "mcp"]
    }
  }
}

In my case, I’m using VS Code, and this is the configuration I need to add: .vscode/mcp.json. To check the configuration for other IDEs, follow the Angular guide.

Now, if you go to your Copilot in Agent mode (look at tools), you have enabled those features:

From now on, if you chat (Copilot, Amazon Q…), these features will be applied. Remember that you can do the same in other IDEs or desktop LLM clients.

Conclusion

Angular’s MCP support might seem like a small feature update, but it represents something much bigger: the transformation of Angular from a framework you use to build applications into a platform for AI-assisted development.

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment , clap or follow. 👏

Spread the Angular love! 💜

If you really liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

Thanks for being part of this Angular journey! 👋😁

Originally published at https://www.codigotipado.com.