๐ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ ๐๐ป ๐๐ฒ๐ฝ๐๐ต ๐ถ๐ ๐ป๐ผ๐ ๐น๐ถ๐๐ฒ!
Master AI-assisted Angular development with ๐๐น๐ฎ๐๐ฑ๐ฒ ๐๐ผ๐ฑ๐ฒ + the ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐ ๐๐ฃ ๐ฆ๐ฒ๐ฟ๐๐ฒ๐ฟ ๐ค
Learn how to build modern Angular applications faster using AI that understands Angular best practices, Signals, standalone components, zoneless architecture, and TypeScript.
๐ ๏ธ Build a complete full-stack application:
โ Angular Signals AI Chat Interface
โ Node + Express REST API
โ OpenAI Integration
โ JWT Authentication & Route Protection
โ Generate UI from Figma Screenshots
๐ก Most importantly, learn how to work professionally with AI coding agents:
โ What to delegate
โ What to review
โ How to write effective prompts
โ How to stop AI from repeating mistakes
๐ง๐ต๐ฒ ๐ณ๐๐๐๐ฟ๐ฒ ๐ผ๐ณ ๐๐ผ๐ณ๐๐๐ฎ๐ฟ๐ฒ ๐ฑ๐ฒ๐๐ฒ๐น๐ผ๐ฝ๐บ๐ฒ๐ป๐ ๐ถ๐๐ปโ๐ ๐๐ฟ๐ถ๐๐ถ๐ป๐ด ๐ฒ๐๐ฒ๐ฟ๐ ๐น๐ถ๐ป๐ฒ ๐ผ๐ณ ๐ฐ๐ผ๐ฑ๐ฒ.
It's designing systems, making architectural decisions, and guiding AI effectively.
๐ https://t.co/GvrD84JTqO
#Angular #AI #ClaudeCode #TypeScript #WebDevelopment
๐ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ ๐๐ป ๐๐ฒ๐ฝ๐๐ต ๐ถ๐ ๐ป๐ผ๐ ๐น๐ถ๐๐ฒ!
Master AI-assisted Angular development with ๐๐น๐ฎ๐๐ฑ๐ฒ ๐๐ผ๐ฑ๐ฒ + the ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐ ๐๐ฃ ๐ฆ๐ฒ๐ฟ๐๐ฒ๐ฟ ๐ค
Learn how to build modern Angular applications faster using AI that understands Angular best practices, Signals, standalone components, zoneless architecture, and TypeScript.
๐ ๏ธ Build a complete full-stack application:
โ Angular Signals AI Chat Interface
โ Node + Express REST API
โ OpenAI Integration
โ JWT Authentication & Route Protection
โ Generate UI from Figma Screenshots
๐ก Most importantly, learn how to work professionally with AI coding agents:
โ What to delegate
โ What to review
โ How to write effective prompts
โ How to stop AI from repeating mistakes
๐ง๐ต๐ฒ ๐ณ๐๐๐๐ฟ๐ฒ ๐ผ๐ณ ๐๐ผ๐ณ๐๐๐ฎ๐ฟ๐ฒ ๐ฑ๐ฒ๐๐ฒ๐น๐ผ๏ฟฝ๏ฟฝ๐บ๐ฒ๐ป๐ ๐ถ๐๐ปโ๐ ๐๐ฟ๐ถ๐๐ถ๐ป๐ด ๐ฒ๐๐ฒ๐ฟ๐ ๐น๐ถ๐ป๐ฒ ๐ผ๐ณ ๐ฐ๐ผ๐ฑ๐ฒ.
It's designing systems, making architectural decisions, and guiding AI effectively.
๐ https://t.co/GvrD84JTqO
#Angular #AI #ClaudeCode #TypeScript #WebDevelopment
Angular v22 is right around the corner!
The Release Candidate (RC) is live, and we need your help to cross the finish line. Take the new features for a spin, test them on your projects, and share any last-minute feedback with us!
Try the RC today: https://t.co/0QqzRpPiLa
The countdown to Angular v22 has officially begun! ๐ Something big is coming early June, and we canโt wait to share it with you.
What feature or improvement are you hoping for most in v22? Drop your wishlist below ๐
๐ ๐๐ ๐๐ถ๐ฝ ๐ณ๐ผ๐ฟ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐ฑ๐ฒ๐๐: Have Claude Code use the Angular CLI + Puppeteer to reproduce a bug and iterate on it until itโs fixed. ๐คฏ
Here is a sample prompt:
"start the frontend with npm start on 4200, and take screenshots of the chat home page
with puppeteer and iterate on it until it matches closely the Figma design.
Fix the layout issues."
๐ธ Alternatively, take screenshots yourself and feed them directly to the AI.
๐ But full iteration with Puppeteer usually produces much better results and saves you multiple manual feedback cycles.
This approach changes frontend development completely. Give it a shot ๐
#Angular #AI #ClaudeCode #Puppeteer #WebDevelopment #TypeScript #Frontend #Programming
๐ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐ฑ๐ฒ๐๐: connecting Claude Code to the Angular MCP Server massively improves AI-generated Angular code and cuts outdated patterns + hallucinations. ๐ฅ
It gives AI agents direct access to:
โ Your Angular version
โ Latest Angular APIs
โ Official Angular best practices
โ Signals & zoneless patterns
โ Up-to-date Angular examples
This dramatically reduces outdated Angular code generation like:
โ ngModel-era patterns
โ pre-signals architecture
โ obsolete APIs
Think of it as a bridge between Claude Code and the official Angular knowledge base for your specific Angular version.
The result:
Much better Angular code with far fewer hallucinations. ๐ฅ
#Angular #AI #ClaudeCode #WebDevelopment #Programming
๐ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐ฑ๐ฒ๐๐: connecting Claude Code to the Angular MCP Server massively improves AI-generated Angular code and cuts outdated patterns + hallucinations. ๐ฅ
It gives AI agents direct access to:
โ Your Angular version
โ Latest Angular APIs
โ Official Angular best practices
โ Signals & zoneless patterns
โ Up-to-date Angular examples
This dramatically reduces outdated Angular code generation like:
โ ngModel-era patterns
โ pre-signals architecture
โ obsolete APIs
Think of it as a bridge between Claude Code and the official Angular knowledge base for your specific Angular version.
The result:
Much better Angular code with far fewer hallucinations. ๐ฅ
#Angular #AI #ClaudeCode #WebDevelopment #Programming
This is a game-changer for modern, reactive @angular: a linked signal can now write back to its source of truth. The logic for this is defined when setting up the linked signal.
Impressive, how small changes make a huge impact.
https://t.co/oaoSJHgFGB
๐จ ๐๐ถ๐ฑ ๐๐ผ๐ ๐ธ๐ป๐ผ๐ ๐๐ต๐ฎ๐ ๐๐ต๐ฒ๐ฟ๐ฒ ๐ถ๐ ๐บ๐ผ๐ฟ๐ฒ ๐๐ต๐ฎ๐ป ๐ผ๐ป๐ฒ ๐๐๐๐จ๐๐.๐บ๐ฑ? ๐คฏ
๐๐น๐ฎ๐๐ฑ๐ฒ ๐๐ผ๐ฑ๐ฒ looks for ๐๐๐๐จ๐๐.๐บ๐ฑ files in multiple locations and merges them together, with a clear hierarchy: ๐ง โก
๐ญ. ๐๐ป๐๐ฒ๐ฟ๐ฝ๐ฟ๐ถ๐๐ฒ ๐ฟ๐ผ๐ผ๐ CLAUDE.md
Enforce non-negotiables: banned libraries, security policies, data handling rules
Keep it lean; it loads for every session company-wide so noise costs everyone.
๐ฎ. ๐จ๐๐ฒ๐ฟ-๐น๐ฒ๐๐ฒ๐น (~/.claude/CLAUDE.md)
Personal workflow: preferred tools, editor conventions, tabs over spaces, how you like things explained.
Avoid project-specific content โ it'll bleed into unrelated projects.
๏ฟฝ๏ฟฝ. ๐ฃ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐ ๐ฟ๐ผ๐ผ๐ (./CLAUDE.md)
Lead with the essentials: how to build, test, and run the project.
Document non-obvious architectural decisions so Claude doesn't refactor them away.
List libraries and preferences between similar options (dayjs not moment)
Commit it โ it's documentation for teammates as much as for Claude.
๐ฐ. ๐ก๐ฒ๐๐๐ฒ๐ฑ ๐๐๐๐จ๐๐.๐บ๐ฑ ๐ณ๐ถ๐น๐ฒ๐
Instructions valid only inside that folder, like frontend and backend project decisions, /mobile vs /api for example.
Great for monorepos where many folders have little in common.
Document "why" for weird local patterns, not just "what"
๐ฑ. ๐๐บ๐ฝ๐ผ๐ฟ๐๐ฒ๐ฑ ๐ณ๐ถ๐น๐ฒ๐ (@path/to/file.md)
Share a single source of truth across multiple CLAUDE.md files in a monorepo.
Scope each imported file to one topic so it's reusable without dragging in noise.
Avoid deep import chains โ they're hard to debug.
๐ฒ. ๐ฃ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐ ๐น๐ผ๐ฐ๐ฎ๐น (./CLAUDE.local.md)
Gitignored personal overrides within a project โ add to .gitignore explicitly.
Local credentials, machine-specific paths, Work in progress notes you don't want to share.
๐จ ๐๐ถ๐ฑ ๐๐ผ๐ ๐ธ๐ป๐ผ๐ ๐๐ต๐ฎ๐ ๐๐ต๐ฒ๐ฟ๐ฒ ๐ถ๐ ๐บ๐ผ๐ฟ๐ฒ ๐๐ต๐ฎ๐ป ๐ผ๐ป๐ฒ ๐๐๐๐จ๐๐.๐บ๐ฑ? ๐คฏ
๐๐น๐ฎ๐๐ฑ๐ฒ ๏ฟฝ๏ฟฝ๏ฟฝ๏ฟฝ๐ผ๐ฑ๐ฒ looks for ๐๐๐๐จ๐๐.๐บ๐ฑ files in multiple locations and merges them together, with a clear hierarchy: ๐ง โก
๐ญ. ๐๐ป๐๐ฒ๐ฟ๐ฝ๐ฟ๐ถ๐๐ฒ ๐ฟ๐ผ๐ผ๐ CLAUDE.md
Enforce non-negotiables: banned libraries, security policies, data handling rules
Keep it lean; it loads for every session company-wide so noise costs everyone.
๐ฎ. ๐จ๐๐ฒ๐ฟ-๐น๐ฒ๐๐ฒ๐น (~/.claude/CLAUDE.md)
Personal workflow: preferred tools, editor conventions, tabs over spaces, how you like things explained.
Avoid project-specific content โ it'll bleed into unrelated projects.
๐ฏ. ๐ฃ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐ ๐ฟ๐ผ๐ผ๐ (./CLAUDE.md)
Lead with the essentials: how to build, test, and run the project.
Document non-obvious architectural decisions so Claude doesn't refactor them away.
List libraries and preferences between similar options (dayjs not moment)
Commit it โ it's documentation for teammates as much as for Claude.
๐ฐ. ๐ก๐ฒ๐๐๐ฒ๐ฑ ๐๐๐๐จ๐๐.๐บ๐ฑ ๐ณ๐ถ๐น๐ฒ๐
Instructions valid only inside that folder, like frontend and backend project decisions, /mobile vs /api for example.
Great for monorepos where many folders have little in common.
Document "why" for weird local patterns, not just "what"
๐ฑ. ๐๐บ๐ฝ๐ผ๐ฟ๐๐ฒ๐ฑ ๐ณ๐ถ๐น๐ฒ๐ (@path/to/file.md)
Share a single source of truth across multiple CLAUDE.md files in a monorepo.
Scope each imported file to one topic so it's reusable without dragging in noise.
Avoid deep import chains โ they're hard to debug.
๐ฒ. ๐ฃ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐ ๐น๐ผ๐ฐ๐ฎ๐น (./CLAUDE.local.md)
Gitignored personal overrides within a project โ add to .gitignore explicitly.
Local credentials, machine-specific paths, Work in progress notes you don't want to share.
๐ ๐โ๐บ ๐๐ฒ๐ฟ๐ ๐ต๐ฎ๐ฝ๐ฝ๐ ๐๐ผ ๐ฎ๐ป๐ป๐ผ๐๐ป๐ฐ๐ฒ ๐๐ต๐ฒ ๐ป๐ฒ๐ ๐ ๐ฐ๐ผ๐๐ฟ๐๐ฒ ๐ต๐ฒ๐ฟ๐ฒ ๐ฎ๐ ๐๐ต๐ฒ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐จ๐ป๐ถ๐๐ฒ๐ฟ๐๐ถ๐๐!
๐ค ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ ๐๐ป ๐๐ฒ๐ฝ๐๐ต ๐๐ผ๐๐ฟ๐๐ฒโก (๐ช๐ถ๐๐ต ๐๐น๐ฎ๐๐ฑ๐ฒ ๐๐ผ๐ฑ๐ฒ)
We are going to vibe code an Angular AI assistant chatbot from scratch using the OpenAI API and the Claude Code AI coding agent.
๐ ๐๐ฏ๐ผ๐๐ ๐๐ต๐ถ๐ ๐ฐ๐ผ๐๐ฟ๐๐ฒ
Our job as developers is no longer to write most of the code ourselves.
Itโs now about designing systems, making architectural decisions, choosing the right dependencies, and guiding AI to generate code that is clean, maintainable, and easy to verify.
The developers who know how to work effectively with AI already have a huge advantage. ๐
This course is a complete, practical guide to AI-assisted modern Angular development with signals, focused on modern Angular with standalone components, signals, zoneless architecture, and coding agents like Claude Code.
We start by configuring Claude Code properly for Angular, Node, and TypeScript projects, including the Angular MCP Server, so the AI has access to up-to-date Angular documentation and best practices for your exact Angular version. ๐ง
Then we use it to build a complete full-stack application from scratch:
โจ A signals-based Angular AI chat interface
โ๏ธ Backed by a Node + Express REST API
๐ค Integrated with the OpenAI API
๐ Authentication, JWT sessions, route protection, and secure password handling
This includes generating the frontend UI from Figma screenshots, building the full chat experience, and implementing the backend architecture step by step.
Most importantly, youโll learn how to actually work with AI professionally:
๐ What to delegate
๐ What to review
๐ How to structure prompts
๐ How to stop the AI from repeating the same mistakes
This is a practical, code-first course built around one real sample application.
โณ The course will be pre-launched in the coming days.
๐๐ถ๐ ๐ฟ๐ฒ๐ฝ๐น๐ โ what do you think about this course? ๐๐ฅ
#Angular #AI #ClaudeCode #OpenAI #TypeScript #WebDevelopment #SoftwareEngineering
๐ I'm very happy to announce that the new ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ ๐๐ป ๐๐ฒ๐ฝ๐๐ต course is now available in pre-launch mode. ๐
๐https://t.co/ThwqXLJb3T
The first lessons will be published next week, and after that new lessons will be released weekly until the course is complete.
๐ Check out the table of contents
๐ Get the course: ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐๐ ๐๐ป ๐๐ฒ๐ฝ๐๐ต (with Claude Code)
๐ฌ Hit reply and let me know: what would you like to see added to the table of contents?
๐๐ฏ๐ผ๐๐ ๐๐ต๐ถ๐ ๐ฐ๐ผ๐๐ฟ๐๐ฒ
Our job as developers is no longer writing most of the code ourselves anymore.
Today, itโs about:
โก Designing systems
โก Making architectural decisions
โก Choosing the right dependencies
โก Guiding AI to generate clean, maintainable, verifiable code
The developers who know how to work effectively with AI already have a huge advantage.
This course is a complete, practical guide to AI-assisted Angular development with:
๐ฅ Signals
๐ฅ Standalone Components
๐ฅ Zoneless Architecture
๐ฅ Claude Code & AI coding agents
We start by configuring Claude Code properly for Angular, Node, and TypeScript projects โ including the Angular MCP Server, so the AI has access to up-to-date Angular documentation and best practices for your exact Angular version.
Then we build a complete full-stack application from scratch:
โ ๐ค A signals-based Angular AI chat interface
โ ๐ A Node + Express REST API backend
โ ๐ง OpenAI API integration
โ ๐ Authentication, JWT sessions & route protection
โ ๐จ Frontend UI generated from Figma screenshots
โ ๐๏ธ Full backend architecture step by step
Most importantly, you'll learn how to actually work with AI professionally:
โ What to delegate
โ What to review
โ How to structure prompts
โ How to stop AI from repeating the same mistakes
This is a practical, code-first course built around one real sample application.
๐ First lessons are coming next week.
๐๐ฒ๐ฟ๐ฒ ๐ถ๐ ๐๐ผ ๐ญ๐ฌ ๐๐ฒ๐ฎ๐ฟ๐ ๐ผ๐ณ ๐๐ต๐ฒ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐จ๐ป๐ถ๐๐ฒ๐ฟ๐๐ถ๐๐ ๐๐ฅ
Over the years, more than 270,000 developers have taken my courses. Still very hard for me to fully wrap my head around that number.
That's 1,651 lessons recorded until today ( re-recordings included ๐)
I just wanted to take a moment to thank to everyone who one way or the other has been part of all of this: The Angular team for building and evolving the framework through all these years, the Angular community, and to everyone who took the courses.
Thank you ๐
Vasco
#angular
๐ฆ๐ฅ๐๐ถ๐ณ๐ณ๐ฒ๐ฟ๐ฒ๐ป๐ฐ๐ฒ ๐ฏ๐ฒ๐๐๐ฒ๐ฒ๐ป ๐๐ฒ๐ณ๐ฎ๐๐น๐ ๐๐ต๐ฎ๐ป๐ด๐ฒ ๐๐ฒ๐๐ฒ๐ฐ๐๐ถ๐ผ๐ป ๐ฎ๐ป๐ฑ ๐ข๐ป๐ฃ๐๐๐ต ๐ถ๐ป ๐ฎ ๐ญ๐ฌ๐ฌ% ๐๐ถ๐ด๐ป๐ฎ๐น๐-๐ฏ๐ฎ๐๐ฒ๐ฑ ๐ญ๐ผ๐ป๐ฒ๐น๐ฒ๐๐ ๐ฎ๐ฝ๐ฝ๐น๐ถ๐ฐ๐ฎ๐๐ถ๐ผ๐ป?
In practice, no meaningful difference. But still very interesting to know why:
๐๐ผ๏ฟฝ๏ฟฝ๏ฟฝ ๐๐ถ๐ด๐ป๐ฎ๐น๐ ๐ฑ๐ฟ๐ถ๐๐ฒ ๐ฐ๐ต๐ฎ๐ป๐ด๐ฒ ๐ฑ๐ฒ๐๐ฒ๐ฐ๐๐ถ๐ผ๐ป
When a signal is read in a template, Angular's reactive graph records that dependency. When the signal updates, Angular internally calls markForCheck() on that component โ regardless of its change detection strategy.
Both Default and OnPush get marked dirty and re-rendered by the same mechanism.
๐ช๐ต๐ฎ๐ ๐ข๐ป๐ฃ๐๐๐ต ๐๐ฎ๐ ๐ฎ๐ฐ๐๐๐ฎ๐น๐น๐ ๐๐ผ๐น๐๐ถ๐ป๐ด
OnPush was designed to opt out of the Zone.js-driven "check everything" cycle.
Without it, Zone.js would patch every setTimeout, Promise, XHR, etc. and trigger a full top-down tree walk.
OnPush let you say "only check me if my inputs changed or Iwas explicitly marked dirty."
In a zoneless app, that problem doesn't exist. There is no global tick.
Either:
1 - A signal marks a component dirty
2 - Or you mark the component has dirty yourself explicitly
Notice that the async pipe will also mark the component as dirty, but here I'm assuming a signals-only app.
In a signal-based zoneless app, there's no runaway Zone.js cycle to protect against.
๐ช๐ต๐ฎ๐ ๐ต๐ฎ๐ฝ๐ฝ๐ฒ๐ป๐ ๐ถ๐ณ ๐๐ถ๐ด๐ป๐ฎ๐น๐ ๐ฎ๐ฟ๐ฒ ๐ฏ๐๐ฝ๐ฎ๐๐๐ฒ๐ฑ
In this exact type of application, if you accidentally bypass signals โ a direct property mutation, a class field updated without signal.set(), etc. โ nothing happens.
This hold true for both Default and OnPush - again this is true for a zoneless application specifically.
In a disciplined signals-only codebase that's actually a non-issue - every data modification goes via a signal.
๐๐ป๐ด๐๐น๐ฎ๐ฟ'๐ ๐ฑ๐ถ๐ฟ๐ฒ๐ฐ๐๐ถ๐ผ๐ป
In the long term, it looks like fine-grained signal reactivity replaces the more coarse-grained Default/OnPush distinction entirely.
The more concrete near-term step is https://t.co/2VC79F7Wcs,
which proposes making OnPush the schematic default in Angular 22 โ because in a signals-first world, Default becomes the odd choice rather than OnPush.
#angular #angular21 #angular22 #onpush #changedetection
๐ฆ๐ฅ๐๐ถ๐ณ๐ณ๐ฒ๐ฟ๐ฒ๐ป๐ฐ๐ฒ ๐ฏ๐ฒ๐๐๐ฒ๐ฒ๐ป ๐๐ฒ๐ณ๐ฎ๐๐น๐ ๐๐ต๐ฎ๐ป๐ด๐ฒ ๐๐ฒ๐๐ฒ๐ฐ๐๐ถ๐ผ๐ป ๐ฎ๐ป๐ฑ ๏ฟฝ๏ฟฝ๏ฟฝ๐ป๐ฃ๐๐๐ต ๐ถ๐ป ๐ฎ ๐ญ๐ฌ๐ฌ% ๐๐ถ๐ด๐ป๐ฎ๐น๐-๐ฏ๐ฎ๐๐ฒ๐ฑ ๐ญ๐ผ๐ป๐ฒ๐น๐ฒ๐๐ ๐ฎ๐ฝ๐ฝ๐น๐ถ๐ฐ๐ฎ๐๐ถ๐ผ๐ป?
In practice, no meaningful difference. But still very interesting to know why:
๐๐ผ๐ ๐๐ถ๐ด๐ป๐ฎ๐น๐ ๐ฑ๐ฟ๐ถ๐๐ฒ ๐ฐ๐ต๐ฎ๐ป๐ด๐ฒ ๐ฑ๐ฒ๐๐ฒ๐ฐ๐๐ถ๐ผ๐ป
When a signal is read in a template, Angular's reactive graph records that dependency. When the signal updates, Angular internally calls markForCheck() on that component โ regardless of its change detection strategy.
Both Default and OnPush get marked dirty and re-rendered by the same mechanism.
๐ช๐ต๐ฎ๐ ๐ข๐ป๐ฃ๐๐๐ต ๐๐ฎ๐ ๐ฎ๐ฐ๐๐๐ฎ๐น๐น๐ ๐๐ผ๐น๐๐ถ๐ป๐ด
OnPush was designed to opt out of the Zone.js-driven "check everything" cycle.
Without it, Zone.js would patch every setTimeout, Promise, XHR, etc. and trigger a full top-down tree walk.
OnPush let you say "only check me if my inputs changed or Iwas explicitly marked dirty."
In a zoneless app, that problem doesn't exist. There is no global tick.
Either:
1 - A signal marks a component dirty
2 - Or you mark the component has dirty yourself explicitly
Notice that the async pipe will also mark the component as dirty, but here I'm assuming a signals-only app.
In a signal-based zoneless app, there's no runaway Zone.js cycle to protect against.
๐ช๐ต๐ฎ๐ ๐ต๐ฎ๐ฝ๐ฝ๐ฒ๐ป๐ ๐ถ๐ณ ๐๐ถ๐ด๐ป๐ฎ๐น๐ ๐ฎ๐ฟ๐ฒ ๐ฏ๐๐ฝ๐ฎ๐๐๐ฒ๐ฑ
In this exact type of application, if you accidentally bypass signals โ a direct property mutation, a class field updated without signal.set(), etc. โ nothing happens.
This hold true for both Default and OnPush - again this is true for a zoneless application specifically.
In a disciplined signals-only codebase that's actually a non-issue - every data modification goes via a signal.
๐๐ป๐ด๐๐น๏ฟฝ๏ฟฝ๐ฟ'๐ ๐ฑ๐ถ๐ฟ๐ฒ๐ฐ๐๐ถ๐ผ๐ป
In the long term, it looks like fine-grained signal reactivity replaces the more coarse-grained Default/OnPush distinction entirely.
The more concrete near-term step is https://t.co/2VC79F7Wcs,
which proposes making OnPush the schematic default in Angular 22 โ because in a signals-first world, Default becomes the odd choice rather than OnPush.
#angular #angular21 #angular22 #onpush #changedetection
๐ง๐ต๐ฒ ๐๐ป๐ด๐๐น๐ฎ๐ฟ ๐ ๐๐ฃ ๐ฆ๐ฒ๐ฟ๐๐ฒ๐ฟ ๐ถ๐ ๐ฎ ๐ด๐ฎ๐บ๐ฒ ๐ฐ๐ต๐ฎ๐ป๐ด๐ฒ๐ฟ ๐ณ๐ผ๐ฟ ๐๐-๐ฎ๐๐๐ถ๐๐๐ฒ๐ฑ ๐ฑ๐ฒ๐๐ฒ๐น๐ผ๐ฝ๐บ๐ฒ๐ป๐ ๐
Itโs a ๐๐๐ฎ๐ป๐ฑ๐ฎ๐ฟ๐ฑ๐ถ๐๐ฒ๐ฑ ๐๐ "๐ฝ๐น๐๐ด๐ถ๐ป" that gives tools like ๐๐น๐ฎ๐๐ฑ๐ฒ ๐๐ผ๐ฑ๐ฒ direct access to Angular documentation, best practices, and real examples - matched to your projectโs Angular version via angular.json.
๐ No more outdated or generic answers
๐ Code generation aligned with latest Angular best practices
๐ Version-aware suggestions (huge for Signals, standalone APIs, etc.)
๐ More accurate debugging and architectural guidance
In short: your AI stops hallucinating Angular code and starts writing it the right way. Here is how you can configure your ~/.claude.json to start the MCP server in each Claude Code session.
Notice that experimental tools like modernize (to help with migration to Signals) are off by default: