Modern Angular with AI
Master standalone architecture, fine-tuned reactivity with Signals, AI, advanced control flow, all without NgModules. Learn how to scale, test, and deploy modern Angular apps with confidence and performance in mind.
Is it for you?
Angular is changing. AI, Signals, standalone components, @if, @for, and the whole architecture are becoming more modular and efficient. At first, it just feels like a bunch of new stuff, but once you get into it, writing apps really feel different, cleaner, simpler and less messy.
It's not like you have to rewrite everything. But it's good to know how things are done now. In job interviews, in team decisions, even in how confident you feel working on something new.
This workshop feels like a good way to finally get up to speed and level up a bit. No pressure, just a solid way to stay current
Agenda
- 01
Signals fundamentals (2.5h-3.5h)
- signal() basics – creating reactive values, differences from variables
- Observable vs Signals – conceptual differences, when to use which
- Migration from Observable – step-by-step conversion patterns, interop with RxJS
- computed() deep dive – automatic calculations, dependency tracking, optimization
- effect() mastery – side effects, cleanup functions, execution timing
- rxResource introduction – async data loading, error handling, loading states
- Shopping cart hands-on – adding products, sum calculations, reactive UI updates
- Debugging signals – Angular DevTools, tracking changes, performance insights
- 02
Control Flow (1h)
- @if syntax – conditions, else blocks, DOM optimization
- @for with tracking – iterations, performance benefits, key functions
- @switch cases – multiple conditions, default handling, nested switches
- Migration from structural directives – *ngIf/*ngFor to new control flow
- Performance comparison – old vs new control flow benchmarks
- 03
Standalone Components (1h)
- Standalone fundamentals – component definition, imports array, NgModule elimination
- Progressive migration strategy – step-by-step transition from existing applications
- Module-free routing – loadComponent, lazy loading strategies
- Testing standalone components – TestBed configuration, dependency mocking
- From-scratch project – building mini-app without any NgModules
- 04
Modern DI with inject() (1.5h)
- inject() vs constructor injection – syntax differences, benefits, limitations
- New provider functions – custom providers, factory functions, multi-providers
- Subscription management – DestroyRef, takeUntilDestroyed patterns
- Injection context – runInInjectionContext usage patterns
- Testing with inject() – mocking strategies, spy setup patterns
(New) AI topics
- 01
Setting Up the Visual Feedback Pipeline (25 min)
- Why text-only prompts fail for UI work - layout breaks, @if edge cases, empty states
- What "MCP" actually means in a Claude Code workflow (no fluff, just mechanics)
- The difference between autocomplete AI and agentic AI that observes
- 02
Why AI Gets Angular Wrong Without Visual Context (15 min)
- Installing and configuring Playwright MCP + Chrome MCP with Claude Code
- Connecting it to a running ng serve instance
- Your first test: ask Claude to build a component, then ask it "does it look right?"
- Watch it screenshot, read the DOM, check console errors and fix itself
- 03
Real Angular Scenarios, Live (40 min)
- Responsive layouts - AI checks breakpoints via viewport resize, not guessing
- Control flow edge cases - @if with empty block, @switch - AI verifies each branch renders correctly
- HTTP + Loading/Error States - AI fires real HTTP requests against your API, reads the rendered loading skeleton, waits for the response, then verifies the success and error states all display correctly - without you touching the browser once
- Form validation states - AI fills fields, submits, reads error messages from DOM
- Signal-driven UI - AI mutates state and watches the component react in real time
- 04
Building Your Own Angular AI Workflow (20 min)
- CLAUDE.md structure for Angular projects (which commands, which context to give)
- Prompt patterns that tell AI what to verify after rendering, not just what to build
- When to trust the screenshot loop and when to take control manually
- Cost vs. speed tradeoffs - when is the token spend worth it?
Interested in mastering Modern Angular?
Max 15 seats groups. 1:1 GDE mentoring included.
Benefits
Hands-On Exercises
Real coding tasks, not just slides.
Q&A Session
Time to ask about your own project.
Small Group
Max 15 people, so everyone gets attention.
Certificate
Proof of your updated Angular skills.
1:1 With A GDE
A private 30-min call about your codebase.
Fully Online
Join live from anywhere in the world.
Your Trainer
Mateusz Stefańczyk
Google Developer Expert
For 9 years, Mateusz has been developing web applications with Angular. He has performed dozens of audits for Angular projects worldwide. Mateusz actively participates in the angular.love community, writing expert articles, and sharing his knowledge at Angular meetups in Poland, Norway, Germany, and the UK.
What developers say about our workshops?
“I highly recommend Modern Angular Workshops. Mateusz' deep knowledge makes it really beneficial. Workshops helped me take my signal skills to another level and I hope that I will have opportunity to participate once again.”
“I thoroughly enjoyed attending the two-day workshop. The trainers were very friendly and approachable, making the learning experience engaging and supportive. Even after the workshop, they remain available to help with any questions, which I truly appreciate. After the trainings, you will have a clear understanding of how to improve your projects with the latest Angular features.”
“What I appreciated most about Mateusz' Signal Forms workshop was that he went beyond the basics and tackled real-world use cases — you could tell he really knows what he's talking about. Fanis did a great job moderating the Scalable Architecture & Modern Reactivity session, bringing years of hands-on Angular expertise to the table. I walked away with ideas I'm already putting into practice.”
“First session delivered by Fanis was amazing — from the first slide he showed his passion and the in-depth knowledge that he has. I was quite sceptic about the NX setup but his slides and practical sessions helped to understand it better and see the benefits. Sessions on Signal Forms by Mateusz made me push harder for an Angular 21 upgrade at my work. The delivery was exceptional; lab sessions covered each topic in real depth and were easy to follow.”
Bring This Workshop to Your Team!
Want to upskill your entire dev team? This Angular workshop is also available as a private in-house or remote session, fully adapted to your team's needs, codebase, and experience level.
Contact us- Agenda tailored to your project
- Flexible dates for your team
- Google Developer Expert trainers
- Work on your codebase (optional)
FAQ
Who is this Angular workshop for?
For developers who have been working with Angular but haven't had time to catch up with the latest changes. Also ideal for those early in their Angular journey (up to ~1 year) who want to understand modern patterns, architecture, and tooling.
Will the workshop be recorded and available for later access?
No, the workshop will be live only. There will be no recordings available afterwards.
In what language will the workshop be conducted?
The workshop will be conducted in English.
Is there any certification or proof of participation?
Yes, every participant will receive a certificate of participation after completing the workshop.
What happens if the minimum group size isn't reached?
We will get in touch with you ahead of time. You will have the choice to either transfer your registration to a new workshop date or receive a full 100% refund.
Do I need to install anything before the workshop?
No installation is required. All coding exercises will be done in-browser using StackBlitz.
Do you issue invoices?
Yes. Immediately after purchasing via Stripe, you will receive an automatic receipt. Shortly after, we will manually issue and email you our official company invoice.
Can I get an invoice with a deferred payment term?
Absolutely! If you need an invoice with specific payment terms, email us at workshop@houseofangular.io, and we will issue one for you.