标签：#angular

Overview This guide shows you how to fix a critical Azure App Service configuration issue where the keyVaultReferenceIdentity property is hidden from the Azure Portal but required for accessing Key Vault secrets. Symptoms Developers encountering this issue typically observe: Key Vault references returning empty values instead of secret content Configuration entries showing "Not Resolved" error messages Application settings failing to fetch secret values from Key Vault Authentication errors when attempting to access protected secrets 401/403 errors from App Service attempting to validate Key Vault access Why This Happens Azure App Service uses Managed Identity authentication to access Key Vault secrets, but the keyVaultReferenceIdentity property is deliberately hidden from standard Azure Portal interfaces. This property only exists at the Azure Resource Manager (ARM) level, making it invisible through the typical Azure management UI. Technical Architecture App Service → Managed Identity → Azure AD → Key Vault Access Policy → Secret Store App Service attempts to authenticate using its assigned Managed Identity Azure needs explicit permission through the keyVaultReferenceIdentity property This permission exists only in the underlying ARM configuration Without this configuration, the authentication chain breaks Key Vault references resolve to empty values or error messages Why Portal Visibility is Limited Microsoft implements this design choice for several reasons: Security : Keeps identity-to-Key Vault mappings out of standard management interfaces Simplicity : Prevents accidental misconfigurations that could cause security issues Audit Trail : Ensures all identity configurations go through proper change management Resource Provider : Some properties require ARM-level configuration for consistency Prerequisites Required Azure Resources Azure Subscription : Active subscription with appropriate permissions Azure App Service : Existing Linux or Windows App Service User-As

Angular 21 Module Federation: Build a Micro Frontend Workspace with One Host and Three Remotes If you're exploring Micro Frontends with Angular 21, one of the first questions you'll encounter is: "How do I set up a complete Module Federation workspace that actually works with Angular 21?" After a few iterations (and a couple of version mismatches), I successfully created a housekeeping/admin platform using Angular 21 Native Federation with: 1 Host Application 3 Remote Applications Shared routing Native Federation (esbuild) Single command startup By the end of this tutorial, you'll have the following architecture running locally: +----------------+ | host-app | | Port: 4200 | +--------+-------+ | --------------------------------------- | | | v v v +-------------+ +-------------+ +-------------+ | auth-app | | user-app | | role-app | | Port: 4201 | | Port: 4202 | | Port: 4203 | +-------------+ +-------------+ +-------------+ Project Overview This sample project represents a basic housekeeping/admin platform. Application Purpose Port host-app Shell, navigation, remote loading 4200 auth-app Login, logout, access denied 4201 user-app User management 4202 role-app Role management 4203 Host Routes /auth -> auth-app /users -> user-app /roles -> role-app Prerequisites My development environment: Angular CLI : 21.2.19 Node.js : 22.23.1 npm : 10.9.8 OS : macOS (arm64) Angular 21 works well with Native Federation. If you're starting fresh, I recommend pinning Angular CLI to version 21 to avoid compatibility issues. Step 1: Install Angular CLI 21 npm i -g @angular/cli@21 Verify: ng version Expected output: Angular CLI: 21.x Step 2: Create an Empty Workspace Instead of generating an application immediately, create an empty Angular workspace. ng new housekeeping-mf \ --create-application false \ --routing \ --style css \ --skip-git Move into the project: cd housekeeping-mf Step 3: Generate Applications Generate one host and three remotes. ng generate application host-app --routing

Angular apps can now run any agent, with the streaming, tool calls, and shared state already handled. Today we're releasing Angular support for CopilotKit , an open source client that brings any AG-UI agent into your Angular app. It's built with Angular's own patterns, standalone components, dependency injection and signals. You get the building blocks for agent-native apps in Angular: pre-built chat components or a fully headless setup, generative UI, shared state, human-in-the-loop, multimodal attachments, threads and more. Use the CLI to scaffold a full starter Angular app with a Google ADK agent. npx copilotkit@latest init --framework adk-angular Let's see how to set everything up, then go through each of the pieces and give your agent the context. Quickstart docs are on docs.copilotkit.ai/angular . Rainer Hahnekamp (Angular GDE, NgRx core) and Murat Sari helped build the integration and are now taking on its ongoing maintenance. How everything fits together Everything runs on Agent-User Interaction Protocol (AG-UI) , the open protocol that connects agents to user-facing apps. It streams an agent's entire lifecycle as events, the messages, the tool calls, the state changes, which is what keeps your Angular app and the agent in sync. That matters because the agent becomes a choice you can change. The runtime can point at a BuiltInAgent , LangGraph, Google ADK, Mastra, Pydantic AI, Claude Agents SDK or any framework that speaks AG-UI and your Angular code doesn't change. Here's the architecture. ┌──────────────────────────┐ ┌──────────────────────────┐ │ ANGULAR APP │ │ COPILOT RUNTIME (Node) │ │ │ │ │ │ provideCopilotKit() │ ─────► │ holds your model keys │ │ <copilot-chat /> │ AG-UI │ connects to your agent │ │ tools · context · state │ ◄───── │ streams events back │ └──────────────────────────┘ └──────────────┬───────────┘ │ ▼ ┌───────────────────────────┐ │ YOUR AGENT + MODEL │ │ LangGraph · ADK · Mastra │ │ OpenAI or a local model │ └─────────────────────────

1. Introduction In 2026, many teams still default to WordPress when building blogs or marketing sites, often without fully considering the architectural alternatives. The classic WordPress setup PHP on shared hosting or managed WordPress platforms, coupled with a MySQL database and a plugin ecosystem works reliably but comes with inherent performance trade-offs. Modern visitors now expect lightning-fast page loads and perfect Core Web Vitals a bar that traditional WordPress setups struggle to meet without extensive optimization and caching strategies. This article examines why, for many developer-managed websites, Astro + Cloudflare Pages delivers superior results in performance, SEO, security, and maintainability compared to traditional WordPress deployments. We'll explore the technical trade-offs and help you make an informed decision for your next blog or business website. 2. What is Astro + Cloudflare Pages? Astro is a modern web framework that prioritizes delivering fast, lightweight content by default. Instead of running client-side JavaScript on every page load, Astro generates complete HTML during build time. Only interactive elements—dubbed "islands of interactivity"—run JavaScript, and only when needed. Cloudflare Pages is a globally distributed static hosting platform that leverages Cloudflare's edge network for content delivery. Think of it as Git combined with Cloudflare's CDN and security stack with integrated CI/CD, zero-downtime deployments, and automatic edge caching. How they work together: You write your content and components using Astro's Markdown, MDX, or frameworks Astro builds your site to static HTML during your CI/CD pipeline Cloudflare Pages takes the built static assets and deploys them to edge locations worldwide Every request hits the nearest edge location , serving cache-optimized HTML directly This contrasts sharply with WordPress, which typically involves: PHP processing on every request Database queries to fetch content Server-side

Build Firebase AI Logic with Antigravity CLI Note: Google Cloud credits are provided for this project. In this blog post, I demonstrate how to use the Antigravity CLI (an agentic AI assistant integrating directly with development workflows via skills and servers) to build an image analysis demo using Angular, the Firebase Hybrid & On-device Inference Web SDK, and Gemini models. Users upload an image and use a Gemini model to analyze it to generate a few alternative texts, tags, recommendations, and CSS tips to enhance the image quality. When the demo is running in Chrome 148+, the Hybrid & On-device SDK leverages the Prompt API of the on-device Gemini Nano model to perform the image-to-text tasks, and the token usage is 0. When other browsers, such as Safari or Firefox, execute the same tasks, the SDK falls back to Cloud AI (Gemini 3.5 Flash model), which consumes tokens. Next, I describe how to install the skills in my Angular project and register the Angular and Stitch MCP servers in the Antigravity CLI to develop the infrastructure, services, and UI design of my demo. 1. Workflow This is my entire workflow from implementing features, generating UI screens, and mapping the screens to Angular components. 2. Skills I installed the grill-with-docs , angular , and firebase skills in my project for the following reasons: grill-with-docs: Conduct a rigid Q&A session to generate a specification for a feature, refactor, or critical fix. AI is responsible for performing thorough analysis, and putting in more efforts to generate code to achieve the task. domain-modeling: The skill is referenced in the SKILL.md of the grill-with-docs skill, so a copy of it is required. code-review: Spawn two sub-agents to review changes to detect code smells and verify that the changes align with the specification. angular: Provide the best practices of modern Angular architecture, such as using signals and signal forms. firebase: Provide the skills for Firebase AI Logic, Firebase Remote, et

What I built I wanted a workout timer that doesn't just beep at me. So this weekend I built one that writes the workout AND talks me through it, out loud, in a voice that actually sounds like it's yelling at you when things get hard. You give it a callsign, how long you've got, what you want to work, and how brutal you want it. It hands that to Gemini, which breaks the whole thing into 30-90 second intervals with a coaching line for each one. Then every one of those lines gets turned into real audio by ElevenLabs before it ever hits your browser. Nothing is pre-recorded, nothing is a fixed track. Ask for a different workout, get a completely different script and a completely different set of audio clips, generated on the spot. Demo Unedited screen recording, straight off my machine hitting the real APIs, sound included. Compose a routine, it comes back in a couple seconds, pacing curve draws itself as an SVG line, then hitting Start walks through each interval with the active one highlighted in red as it counts down and you actually hear it. The Maximum-intensity segments sound noticeably more unhinged because I turn the ElevenLabs stability knob way down for those specifically. Code https://github.com/marwankous/sonic-kinetic How I built it Go backend, one endpoint. It takes your workout params, sends a prompt to gemini-3.1-flash-lite with a JSON schema locked down tight enough that I don't have to think about parsing garbage back out of it, and gets back a full timeline plus a heart-rate pacing curve. The part I actually enjoyed was the audio pipeline. Every coaching line in the timeline gets fired off to ElevenLabs at the same time, one goroutine each behind a sync.WaitGroup , so a routine with a dozen segments doesn't take a dozen times longer than one with a single segment. Whatever comes back gets base64'd straight onto its segment. I also tie the eleven_flash_v2_5 stability setting to the segment's energy level, dropping it to 0.30 for anything marked Maximum

👋 Welcome to Chapter 9! Imagine a user typing in a search box. They type "i", "ip", "iph", "ipho", "iphon", "iphone" — 6 keystrokes in 2 seconds. Do you really want to make 6 API calls ? Of course not! You want to wait until they stop typing and then search once. That's what timing operators solve. They control when and how often values flow through your stream. ⏱️ debounceTime() — Wait for the Silence debounceTime(ms) waits until there's a pause of ms milliseconds, THEN lets the latest value through. Think of it like this: "Ignore everything until they stop for a moment." Like a person who waits for you to finish talking before responding. import { debounceTime } from ' rxjs/operators ' ; // User types fast: 'i' → 'ip' → 'iph' → 'ipho' → 'iphon' → 'iphone' // debounceTime(400) waits 400ms of silence, then sends 'iphone' only searchControl . valueChanges . pipe ( debounceTime ( 400 )) . subscribe ( term => { this . searchProducts ( term ); // Only called ONCE with 'iphone'! }); Timeline: Type 'i' → [400ms timer starts] Type 'ip' → [reset timer] Type 'iph' → [reset timer] Type 'iphone'→ [reset timer] ... 400ms silence ... EMIT: 'iphone' ✅ Real Angular Example — Smart Search Box import { Component , OnInit , OnDestroy } from ' @angular/core ' ; import { FormControl } from ' @angular/forms ' ; import { Observable , Subject } from ' rxjs ' ; import { debounceTime , distinctUntilChanged , switchMap , startWith , takeUntil } from ' rxjs/operators ' ; @ Component ({ selector : ' app-search-box ' , template : ` <div class="search-wrapper"> <input [formControl]="searchControl" placeholder="Search products..." (keyup.escape)="clearSearch()"> <span *ngIf="isLoading" class="spinner">🔄</span> <button *ngIf="searchControl.value" (click)="clearSearch()">✕</button> </div> <div class="results-count" *ngIf="(results$ | async) as results"> Found {{ results.length }} results </div> <div class="results"> <div *ngFor="let item of results$ | async" class="result-item"> <strong>{{ item.nam

I believe Angular upgrades have become much smoother these days. Most of the time, a simple ng update is enough to move to the latest version. Instead, I spent hours chasing errors that looked completely unrelated to the real problem 😭 After upgrading the project to Angular 21, I started seeing errors like these: Cannot find module '@angular/material/chips' Cannot find module '@angular/material/dialog' Then another one appeared: Error: The current version of "@angular/build" supports Angular ^19... but detected Angular version 21.x instead. At first, it looked like Angular Material wasn't installed correctly but i think the actual issue was a version mismatch inside the project. Some packages had already been upgraded to Angular 21: @angular/core @angular/common @angular/material But the build system was still using: @angular-devkit/build-angular@19 Since Angular's build tools are tightly coupled with the framework version, the compiler started producing misleading errors. The build pipeline was the problem. The Commands That Helped I used these commands: npm ls @angular-devkit/build-angular npm explain @angular-devkit/build-angular They showed that my project was still resolving Angular 19's build package. That was the clue I needed and than I verified that every Angular package was using the same major version. Then I cleaned the project completely: rm -rf node_modules rm package-lock.json npm cache clean --force npm install It takes time usually.(and I did it several times cause Im failed 😃) Finally, I confirmed that all Angular packages were aligned before building again.

There's a pattern I see a lot in Angular codebases that adopted Signals early: a developer discovers rxResource , loves that it handles loading and error state automatically, and then immediately reaches for tap() to write a signal inside the stream. private readonly resource = rxResource ({ params : () => this . paramsSignal (), stream : ({ params }) => this . api . fetch ( params ). pipe ( tap ( data => this . sideSignal . set ( data . meta )) // 💥 ) }); This looks harmless. It runs in development without complaint in zone-based Angular. Then you enable zoneless — or Angular tightens its reactive graph enforcement — and you get NG0600: Writing to signals is not allowed in a reactive context . The rxResource stream runs inside Angular's reactive scheduler. Signal writes there aren't just discouraged — they're illegal by design. The scheduler assumes computed signals and reactive contexts are read-only during evaluation. A write mid-computation breaks the glitch-free guarantee Angular's signal graph is built on. The fix I landed on: make the stream return everything it needs to return, as a single typed value. interface ResourceValue { readonly sections : Section []; readonly meta : Meta ; } private readonly resource = rxResource < ResourceValue , Params > ({ stream : ({ params }) => this . api . fetch ( params ). pipe ( map ( data => ({ sections : transform ( data ), meta : data . meta })) ) }); No tap . No side signal. Everything the rest of the store needs lives in resource.value() and can be read via computed . The lesson isn't "don't use tap". The lesson is that rxResource has a contract: it is a read primitive . Its stream is for fetching and transforming. If you're writing signals inside it, you're treating it as a command bus — and that's a different tool. Originally published on ysndmr.com .

A story about how migrating an interactive office map editor turned into an engineering investigation involving Fabric.js, tainted canvas , and an architecture that's finally easy to extend. In most software projects, one sentence usually makes every developer nervous: "Let's rewrite this module from scratch." It often means months of development, regression risks, and endless architecture discussions. Our project was no different. We develop, a workspace management platform that allows companies to manage office spaces and book desks. One of its core features is an interactive office map editor, where administrators upload floor plans, place desks and meeting rooms, and publish maps for employees. Over the years, this editor slowly evolved into a real monolith. And the problem wasn't simply the number of lines of code. Where It All Started The editor dated back to the AngularJS era. The main component had gradually grown into a single file responsible for almost everything: loading maps working with Fabric.js CRUD operations keyboard shortcuts dialogs saving event handling The main editor component alone contained nearly 2,270 lines of code . Behind it lived another codebase — the map engine itself. Almost 20,000 lines of TypeScript spread across more than 230 files. One of the biggest architectural issues was an infinite rendering loop. fabric . util . requestAnimFrame (() => this . tick ()); Even when the user wasn't interacting with the editor, rendering continued forever. It worked. But every new feature became more expensive to build. Why We Decided to Rewrite It The motivation wasn't AngularJS itself. The real reason was business requirements. The product needed completely new capabilities: map drafts safe publishing high-quality printing multiple workspace modes easier support for new object types Every new feature pushed harder against the existing architecture. Eventually it became obvious: We weren't fighting individual bugs anymore. We were fighting the

TL;DR — Angular 22 promoted Signal Forms from experimental to stable. This is not "Reactive Forms are dead." It's a real architectural trade-off, and this post walks through both APIs in full, with production-realistic code, so you can decide feature-by-feature instead of framework-war-by-framework-war. Table of Contents Why This Matters Now The Core Question Reactive Forms: Why It Became the Standard Full Example: Reactive Forms Login Where Reactive Forms Still Excel Signal Forms: What Actually Changed in Angular 22 Full Example: Signal Forms Login Where Signal Forms Shine Side-by-Side: Core Concepts Mapped Deep Dive: Validation Synchronous Validation Cross-Field Validation Conditional Validation with when() Async Validation Deep Dive: Dynamic and Nested Forms Nested Form Groups Dynamic Collections (FormArray-style) Deep Dive: Form State — Dirty, Touched, Errors, Submission Developer Experience and Testing Performance Considerations Interop: Migrating Without a Big-Bang Rewrite Migration Strategy for Enterprise Teams When NOT to Migrate Decision Framework FAQ Closing Thoughts Why This Matters Now With Angular 22 (released June 3, 2026), Signal Forms left experimental status and became part of the stable, supported API — alongside resource() and httpResource() . That's a meaningful milestone: it means the Angular team ran extensive internal case studies across real form-heavy applications at Google before committing to stability, and the interop story with Reactive Forms has matured enough that a big-bang rewrite is no longer the only migration path. At the same time, Angular 22 also flips two important defaults: components now use OnPush change detection by default, and zoneless change detection continues its push toward becoming the standard. Signal Forms is part of that same story — Angular's reactivity model finally speaking one dialect end-to-end, from component state to form state to async data. None of this makes Reactive Forms obsolete. It changes what "the

In the first article of this series, we saw how a custom build-time compiler can transform a legacy Angular.js template into raw, optimized JavaScript. To recap, starting from this template: <!-- simple.html --> <p> Hello {{ name }}! </p> Our Go compiler generates the following JavaScript module: // simple.js export function template () { const p_0 = document . createElement ( " p " ); const text_1 = document . createTextNode ( "" ); p_0 . append ( text_1 ); return { mount ( container ) { container . append ( p_0 ); }, update ( change ) { if ( " name " in change ) { text_1 . data = " Hello " + change . name + " ! " ; } } } } This is incredibly clean. By running template() , we get an object with mount and update methods. Using mount is fully intuitive: we pass a reference to a DOM element, and it injects our empty paragraph ( p_0 ) into it: import { template } from ' ./simple.js ' ; const { mount , update } = template (); const container = document . getElementById ( ' view-container ' ); mount ( container ); // The DOM now contains: <p></p> (waiting for data) However, the paragraph remains empty until we call update with a change object like this: let changes = { name : " Mario " , }; update ( changes ); // The DOM surgically updates to: <p>Hello Mario!</p> But who is responsible for tracking changes in our application state, building this changes object, and calling update ? The answer lies in marrying the legacy Angular.js $scope with the modern JavaScript Proxy API . The Legacy State Pattern In a traditional Angular.js application, developers mutate the state directly inside a controller by assigning properties to the $scope object: // simple-controller.js export function SimpleController ( $scope ) { $scope . name = " Mario " ; } To bridge the gap between this legacy controller and our new build-time template, we need a way to automatically capture the assignment $scope.name = "Mario" and translate it into a structured update: let changes = { name : " Mario " }

OpenNG Foundation and spartan/ui 1.0 are the headline topics this week: a new home for libraries like Spectator and Elf, and spartan/ui, a stable shadcn-inspired component library for Angular. Also in brief: Storybook's Angular modernization through AnalogJS, the end of ng-conf, and AI Dev Craft in Las Vegas. OpenNG Foundation Maintaining open-source libraries is hard work. Developers often do it in their spare time, committing to years of maintenance, adding new features, and responding to user requests. Last episode, we reported that the ngneat organization was taken down for unknown reasons. While we still don't know why it happened, a new home has emerged for its popular libraries like Spectator and Elf: the OpenNG Foundation. Gerome Grignon, known for CanIUseAngular and as the organizer of Ng-Baguette, announced the foundation, which is already hosting these libraries. Alongside Gerome, the current OpenNG team also includes Dominic Bachmann, organizer of Angular Lucerne and author of the angular-typed-router library. OpenNG Foundation · GitHub OpenNG Foundation has 8 repositories available. Follow their code on GitHub. github.com spartan/ui 1.0 spartan/ui has officially released its 1.0 version. It provides an "accessible, production-ready library of more than 55 components" with fully customizable styling. After debuting in August 2023 with 30 primitives, it now reaches stable in 2026 with a modern architecture built around signals, standalone components, zoneless change detection, and SSR. Originally initiated by Robin Götz, a full team quickly formed around the project. spartan/ui can be seen as the Angular equivalent to shadcn/ui, famous for its customizability. While similar open-source alternatives exist, spartan/ui was the pioneer and has a proven track record of active maintenance over the years. Announcing spartan/ui 1.0 Robin Goetz Robin Goetz Robin Goetz Follow for Playful Programming Angular Jun 24 Announcing spartan/ui 1.0 # angular # webdev 8 reac

Modern Angular Guards: Architecture, Best Practices & Enterprise Patterns A deep dive into designing lightweight, composable, and maintainable routing guards in modern Angular applications. Table of Contents Introduction Why Guards Exist The Golden Rule of Angular Guards Functional Guards: The Modern Standard CanActivateFn: Authentication Guard CanMatchFn: Permission-Based Route Matching CanDeactivateFn: Unsaved Changes Guard CanActivateChildFn: Nested Route Protection Signals + Guards: Reactive Permission State Feature Flags in Routing Guard Composition Patterns UrlTree Redirects vs Imperative Navigation Async Guards: When and How Permission Service Architecture Role-Based Access Control (RBAC) Permission-Based Access Control (PBAC) Route Data for Configuration Lazy Loading with Guards Standalone Routing with provideRouter Route-Level Providers Guards vs Interceptors Guards vs Backend Authorization Performance Considerations Navigation UX Best Practices Error Handling in Guards Testing Guards Common Mistakes Production Checklist Enterprise Routing Insights Conclusion Introduction In modern Angular applications, routing guards have evolved from class-based monoliths into lightweight, composable functions. This shift isn't just syntactic—it's architectural. As Angular applications become larger and more complex, the routing layer becomes a critical piece of the architecture. Guards are the gatekeepers of your navigation, but they should never become the orchestrators of your application logic. This article is for senior Angular developers, software architects, and team leads who are designing routing strategies for enterprise-scale applications. We won't explain what a route guard is—we'll explore how to architect them properly. Why Guards Exist Guards exist to protect navigation boundaries. They evaluate whether a transition should proceed, redirect, or be blocked. In modern Angular, this is achieved through functional guards that return: boolean — allow or block na

Angular has signals now - and as of 19.2, even a signal-based way to fetch: httpResource, built on...

Every developer using Cursor , Claude Code , Windsurf , or GitHub Copilot knows this exact frustration: You are building a cutting-edge Angular 22 application. You ask your AI coding assistant to spin up a dynamic form, a lazy-loaded list, or an asynchronous data card. Instead of leveraging modern fine-grained reactive Signals, optimized native block control flows, or proper SSR hydration hooks, the AI drops an unoptimized pile of legacy tech debt full of NgModules , *ngIf , *ngFor , and raw RxJS BehaviorSubjects . The LLM Training Paradox Why does this happen? Large Language Models are trained on historical code datasets. Statistically, more than 90% of the public Angular repositories and StackOverflow threads on the internet represent older paradigms. Left to their own devices, agents default to the statistical average of their training data. They literally default to the past. The Fix: angular22-agent-skills To solve this, I built a public, open-source repository of custom instruction bundles and system guardrails leveraging the new skills.sh tool standard. By injecting this verified context directly into your development environment, you force your local AI agents to bypass their training averages and write pristine, optimized, modern Angular 22 syntax every single time. 👉 Check out the repo here: https://github.com/PavanAnguluri/angular22-agent-skills 🔍 The Difference: Before vs. After To understand why these guardrails are necessary, look at what an AI agent writes out of the box versus what it writes once you apply the angular22-agent-skills harness. 🚫 What AI Agents Generate by Default (Legacy) // The AI falls back to old decorators and heavy RxJS boilerplate for standard state import { Component , Input , OnInit } from ' @angular/core ' ; import { BehaviorSubject } from ' rxjs ' ; @ Component ({ selector : ' app-user-profile ' , template : ` <div *ngIf="visible"> <h3>{{ firstName }} {{ lastName }}</h3> <div *ngFor="let item of items"> {{ item.name }} </div>

After a long and deliberate alpha, spartan/ui is now 1.0 . We shipped the first 30 primitives in August 2023 with a simple bet: building accessible, good-looking UI in Angular is harder than it should be, and the community deserved a better starting point. Almost three years later, that bet has grown into a stable, production-ready library of more than 55 components - built on signals, ready for zoneless, and server-side-rendering compatible out of the box. Here's what 1.0 actually means. Stable, and ready to build on We stayed in alpha for a long time on purpose. It let us refine the APIs in the open, with real applications putting real pressure on the design, instead of freezing a v1 we'd regret six months later. That patience is what 1.0 cashes in. The APIs are now stable and semantically versioned, so you can depend on spartan/ui/brain and upgrade with confidence. The copy-in spartan/ui/helm layer stays exactly as it's always been - yours to own, read, and customize. No black boxes, no fighting the library to change a style. Built for modern Angular Every primitive is built on Angular signals and standalone components. spartan is zoneless-ready and SSR compatible out of the box, so it drops cleanly into how Angular apps are actually written today - no extra setup, no adapters. The split that's defined spartan from day one still holds. spartan/ui/brain carries the hard, unglamorous parts - ARIA, keyboard navigation, focus management - and keeps them maintained so you don't have to. spartan/ui/helm gives you full styling control on top, copied into your project like a recipe. Accessibility you can rely on; appearance you fully own. From 30 primitives to 55+ The alpha shipped with 30 components. 1.0 ships with more than 55 - nearly double - including many of the most-requested additions over the past two years: Data Table - sorting, filtering, and selection, the piece people asked for most Sidebar - composable app navigation Calendar and Date Picker Carousel , Auto

If you've worked with Angular Material, you know theming can be one of the trickiest parts of the library — especially after the move to Material 3. Token-based theming, custom palettes, dark mode, component-level overrides... there's a lot going on under the hood. I built a full course to break it all down, and I'm excited to announce it's now completely free . What's in the course Angular Material Theming System is a deep, practical walkthrough of Angular Material's theming API for Material 3. By the end, you'll be able to: Build and customize themes from scratch Apply themes at the application level Override and extend themes for individual components Work confidently with Angular Material's theming tokens and APIs It's 46 lessons and roughly 4.5 hours of content, all hands-on and example-driven. Where to find it 🎥 Watch on YouTube: https://www.youtube.com/playlist?list=PLOjtJUnDeEIyaeUs_jrxylnD2IxSb3Ku7 📝 Read the article version: https://angular-ui.com/courses/angular-material-theming/ 💻 Full source code on GitHub: https://github.com/Angular-UI-com/angular-material-theming If you're building with Angular Material and theming has ever felt like a black box, give it a watch. I'd love to hear your feedback in the comments. If this helped you, consider checking out Angular Material Blocks — a library of pre-built Angular Material + Tailwind components, available via a simple CLI.

Most dashboards are built the same way: the user lands on the page, data loads, and then... it sits there. Stale. Until the user hits refresh or you set up an awkward polling interval that hammers your server every few seconds. There's a better way. WebSockets give you a persistent, two-way connection between your Angular app and your server — meaning your dashboard updates the moment new data exists, with zero wasted requests. In this article we'll build a complete real-time dashboard in Angular from scratch — WebSocket service, Signal-based components, auto-reconnection, and production-ready patterns. How WebSockets Differ From Regular HTTP Before writing any code, it's worth understanding what makes WebSockets special. Regular HTTP: Client → "Give me data" → Server Client ← "Here's your data" ← Server [Connection closes] WebSocket: Client ←→ Server [Connection stays open] Server → "New data!" → Client (anytime) Server → "More data!" → Client (anytime) Client → "Send this" → Server (anytime For a real-time dashboard showing live metrics, user activity, or financial data — the WebSocket model is a natural fit. The server pushes updates the moment they happen. No polling, no refresh button, no stale data. Project Setup For this article we'll build a dashboard that shows three live metrics: active users, requests per second, and server CPU usage. Start with a fresh Angular 22 project: ng new realtime-dashboard --standalone cd realtime-dashboard ng serve RxJS ships with Angular so no extra dependencies are needed — webSocket from rxjs/webSocket handles everything. Step 1 — Define Your Data Model Start with a clear TypeScript interface for the data your server will push: // core/models/dashboard.model.ts export interface DashboardMetrics { activeUsers : number ; requestsPerSecond : number ; cpuUsage : number ; timestamp : Date ; } export interface MetricAlert { type : ' warning ' | ' critical ' ; metric : string ; value : number ; message : string ; } export type Dashb

In recent years, Angular has taken an important step toward a simpler and more declarative reactivity model with the introduction of Signals . NgRx, which has long been the de facto standard for state management in complex Angular applications, followed this evolution by introducing Signal Store . The goal is not to completely replace @ngrx/store , but to offer a lighter and more local alternative, designed for use cases where the classic Actions → Reducers → Selectors pattern feels excessive. In this article, we'll see how to use NgRx Signal Store to build a reactive, typed store that integrates seamlessly with Angular components, drastically reducing boilerplate and improving code readability. This tutorial is aimed at Angular developers who are already familiar with Signals and "classic" NgRx. What is NgRx Signal Store NgRx Signal Store introduces a different way of thinking about state compared to classic @ngrx/store . A Signal Store : is not based on Redux does not use actions or reducers does not require explicit selectors Instead, the model revolves around three main concepts: 🧩 State State is defined as a set of signals , typically using withState . Each state property is immediately reactive and can be read directly by components. 🧠 Derived state Derived state is defined using withComputed . It is the conceptual equivalent of selectors, but with a more direct syntax and better integration with Angular's Signals system. 🔧 Methods State changes and side effects (such as HTTP calls) are encapsulated in methods declared with withMethods . This keeps the store logic in a single place, without having to orchestrate multiple files as in the traditional NgRx pattern. In other words, a Signal Store resembles a strongly structured reactive service more than a pure Redux store. This approach makes Signal Stores particularly suitable for: local or feature state small to medium-sized applications reducing complexity in contexts where Redux would be overkill Creating the