AI Has Made Me Faster, But Has It Made Me Worse?
August 28, 2026AI has made me faster. A lot faster. But recently, I caught myself doing something that made me wonder whether that speed is coming at a cost.
Angular Development Tutorials
This website is Brian Treese's Angular Development Blog. The site provides practical, hands-on tutorials and resources for developers who use the Angular framework. The tutorials cover modern Angular techniques including Signals, Components, Forms, Animations, CDK (Component Dev Kit), and Styling. Each tutorial includes code examples, video demonstrations, and step-by-step instructions to help you build Angular applications.
The DOM COM Show
Dev Life, But Funnier!
What is 20 years of coding experience worth now?
August 21, 2026I've been a front-end developer for more than 20 years now. For the last decade or so, most of my work has centered around Angular. I've spent a huge part of my career learning how to write better code, debug faster, understand architecture, recognize patterns, and generally become a more capable developer.
Find the Exact Slow Angular Component with Chrome DevTools
August 13, 2026Chrome DevTools can tell us when an Angular component is slow. But if that component appears several times on the page, knowing the component type is only half the answer. Which instance is actually causing the problem? Angular's Chrome DevTools integration can now bridge that gap, letting us jump from a performance event directly to the exact component instance in Angular DevTools.
Prevent CSS Variable Collisions Between Angular Apps
July 16, 2026CSS custom properties are great for theming, but they can create subtle problems when multiple Angular apps share the same page. If two apps use the same variable name, one can accidentally inherit the other’s value. Angular’s new CSS variable namespacing gives each app its own set of custom properties while still letting you intentionally share global design tokens.
Angular 22 hostDirectives De-Duplication Explained
July 02, 2026Host directives are a great way to compose reusable behavior in Angular, but they had one frustrating edge case: two directives could not safely reuse the same shared host directive on the same element. In this post, we'll build a copy button with tooltip behavior, press feedback, and clipboard support, then look at how Angular 22 now de-duplicates shared host directives so this kind of composition works the way you'd expect.
Angular 22: Better Tab Animations in Material
June 25, 2026Angular Material tabs already make it easy to organize content into separate views, but the animation controls have always had one slightly annoying limitation: the tab indicator and the tab body shared the same animation duration. In Angular 22, that changes. Now, mat-tab-group can use separate values for the tab header and tab body animation durations, giving us more fine-grained control over the animation.
Angular 22: linkedSignal() Can Now Write Back to State
June 18, 2026Angular's linkedSignal() just got a small upgrade with a big practical payoff. It can now read from larger signal state and write back to it with a custom setter, giving us a clean field-level API without creating disconnected duplicate state.
New in Angular 22: Directives for CDK Component Portals
June 11, 2026Angular 22 lets ComponentPortal apply directives to a dynamically rendered component’s host element. In this post, we’ll use that to add a custom directive to the same help component rendered through both CdkPortalOutlet and DomPortalOutlet.
Angular Material Dialogs Now Support Real Component Bindings
June 04, 2026Angular Material dialogs just got a practical upgrade. In Angular 22, dialogs can now bind directly to component inputs, outputs, and model inputs. That means we can build one reusable component, use it inline, and then open that same component inside a dialog without creating a special wrapper component.
The Angular @switch Upgrades You Should Know About
May 28, 2026Angular's @switch block has become a lot more useful recently. With exhaustive type checking, Angular can now catch missing template states when a TypeScript union or enum changes. And with grouped cases, we can remove duplicate markup when multiple states render the same UI. In this post, I'll show both improvements using a real-world example.
Better Loading Buttons in Angular Material v22
May 21, 2026Angular Material v22 adds a small but surprisingly useful improvement to buttons: built-in progress indicator support. Instead of manually swapping button text with a spinner and dealing with layout jumpiness, we can let the Material button directive manage the loading UI for us. In this post, I'll show you the old manual approach, why it creates a small UX issue, and how Angular Material v22 cleans it up.
Angular v22 WebMCP Tools Explained
May 14, 2026Angular v22 is experimenting with a new way to expose your app’s real capabilities to AI. Instead of letting models guess what's happening by scraping the DOM, we can now provide explicit, state-backed tools directly to the browser. This post walks through setting up WebMCP tools to bridge the gap between your Angular state and AI models like Gemini.
Angular’s New injectAsync() API Explained
May 07, 2026Angular v22 just made lazy-loading services much simpler. In this post, we'll explore how to leverage the new injectAsync() API to reduce your main bundle size and replace awkward lazy-loading workarounds. We’ll compare the older manual lazy-loading approach with Angular v22’s new injectAsync() API and see why the new pattern feels simpler and easier to reason about.
Angular 22 @Service vs @Injectable (What You Need to Know)
April 30, 2026Every Angular developer is familiar with @Injectable({ providedIn: 'root' }) for declaring services. While powerful, the @Injectable decorator supports many advanced configurations that are rarely used in typical application services. Angular 22 introduces a new @Service decorator designed to simplify service declaration for the most common use cases. This post will explore how it streamlines service creation and even enforces modern dependency injection patterns.
This Completely Changed My Angular Development Workflow
April 23, 2026You ever use AI to generate Angular code that's almost right, but not quite? You end up renaming things, swapping decorators for signals, and rewriting *ngIf to @if every single time. Well, in this post, I'll show you how to use Cursor Skills to encode those fixes once and automate your Angular workflow for the whole team.
Better Numeric Inputs in Angular (Signal Forms + Angular 22)
April 16, 2026Signal Forms just fixed a subtle, but important, issue you’ve likely shipped without realizing. If you’re using <input type="number">, it's likely that you're introducing UX issues that only show up during real interaction. In this example, I'll show you a better approach that will be available in Angular v22.
How to Get Specific Validation Errors with Angular Signal Forms
April 09, 2026If you’ve ever tried to build something like a password checklist in Signal Forms, you’ve probably run into a frustrating limitation. You need to know if a specific validation rule failed, but the errors API doesn’t make that easy. And if you try to rely on error indexes, things can break pretty quickly as errors come and go. This post walks through how Angular v22 gives us a simple fix for this with the new getError() function.
Angular 22's New Built-in Debounce for Async Validation Explained
April 02, 2026If you're using Signal Forms with async validation, you've probably run into a frustrating issue. You either debounce every validator with the debounce() function, or you end up hitting your API on every keystroke. Neither is great, but Angular 22 fixes this in a really clean way. This post walks through how the new built-in debounce works and why it makes Signal Forms even better.
Angular 22: Mix Signal Forms and Reactive Forms Seamlessly
March 26, 2026What if you could start using Signal Forms today without touching your existing Reactive or Template-driven forms at all? In Angular 22, you'll be able to build Signal-based custom form controls that drop right into your existing forms with no massive rewrites required. This post walks through how to migrate a custom control from ControlValueAccessor to FormValueControl while keeping the parent form completely intact.
Angular’s New debounced() Signal Explained
March 19, 2026Every Angular developer has faced it, an input that spams the backend with every single keystroke. The classic solution involves pulling in RxJS and using debounceTime, but it requires converting signals to observables and thinking in streams. As of Angular v22, there’s a new, cleaner way. The new experimental debounced() signal primitive lets you solve this problem in a more declarative, signal-native way. This post walks through the old way and then refactors it to the new, showing you exactly how to simplify your async data-fetching logic.