31.10 | 9 – 5 PM (CET) | Online
Workshop 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.
Early Birds (-30%) pricing is open
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
Check out what we will be discussing at the workshop!
Duration: 8 hours.
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
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
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
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
Check out what we will be discussing at the workshop!
Duration: 8 hours.
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
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 serveinstance - 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
Real Angular Scenarios, Live (40 min)
- Responsive layouts – AI checks breakpoints via viewport resize, not guessing
- Control flow edge cases – @if, @Stack Overflow 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
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?
Are you interested?
Are you interested?
Benefits
Hands-On Exercises
Work on real, practical tasks so you don’t just hear about modern Angular, you actually use it right away.
Q&A Session
Get clear answers to your questions during a dedicated Q&A a chance to clarify concepts and dive deeper into real-world use cases.
Small Group
Maximum of 15 participants, you’ll benefit from more interaction and personalized support.
Certificate of participation
Simple way to show your updated Angular skills to your team, clients, or future employers.
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.
– Jakub
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.
– Sofia
What I appreciated most about Mateusz’s 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.
– Steffen
Attending the camps for the Scalable architecture & Modern Reactivity Workshop along with the Signal Forms Workshop.
First session delivered by Fanis was amazing, from the first slide he showed his passion in the topic and the in depth knowledge that he has in it. I was quite sceptic about NX setup but his slides and practical sessions helped to understand it better and see the benefits that it comes with and how much easier the codebase becomes with NX.
Sessions on Signal forms by Mateusz made me push harder for Angular 21 upgrade at my work. The delivery was exceptional; simple and lab sessions covered each topic in real depth. The labs were easy to follow, expanded on the slides and helped to understand the new features well.
Overall both days were really good in terms of content, delivery and passing on the knowledge of the experts onto participants. Each session was adjusted to the audience in terms of pace, there was always time to ask questions and during practical sessions both speakers had all the time to fix any issues that were raised by us.
– Rafał
Get your tickets
Join us for an online Modern Angular workshop. Secure your spot today!
Early Bird (-30%) pricing expires in just
June 12
EUROPE Start at 9AM (CEST) • Duration 8h • Online
Last Call (-15%) Price
399 -> 339 EUR
- Full-day workshop access
- Hands-on sessions with mentor
- Certificate of Participation
- Q&A Session
US | CANADA
Date coming soon
Click on the waiting list!
470 -> 329 USD
- Full-day workshop access
- Hands-on sessions with mentor
- Certificate of Participation
- Q&A Session
Best value
Best value
2- Days Workshop
Start at 9AM (CET) • 2x (online)
Signal Forms + Modern Angular
748 -> 523 EUR
Dates:
Modern Angular: 20.04
Signal Forms: 21.04
-
Benefits from Modern Angular
+ Signal Forms included
Team Workshop
Bring this workshop to your team!
Learn more
- Agenda tailored to your project
- Flexible dates for your team
- Google Developer Expert trainers
- Work on your codebase (optional)
Why us?
Projects worldwide
USA, Germany, UK,
Norway, Belgium
Angular experts
Who have coded in Angular
since its release
Years of experience
Building enterprise-scale
web applications
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.
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.
Do I need to install anything before the workshop?
No installation is required. All coding exercises will be done in-browser using StackBlitz.