Angular Basics & Essentials
Your developers build their first production-ready Angular features – with components, signals, forms, routing and tests from day one.
- 2 to 4 Days
- Beginner
- Remote or in-house
- German & English
Is this training right for your team?
Who it’s for
- Developers new to Angular
- Teams switching from React, Vue, AngularJS or server-side frameworks
- Backend developers who take over frontend work
Afterwards your team can
- Build standalone components, templates and forms on their own
- Load and show data with HttpClient, RxJS and signals
- Structure routing, services and dependency injection correctly
- Write first unit and end-to-end tests with Vitest and Playwright
Prerequisites
- Programming experience in any language
- Basic HTML, CSS and JavaScript
- Node.js and an editor installed – we send a checklist beforehand
Angular is big, and a team that learns it from blog posts picks up as many bad habits as good ones. In two to four days – depending on how deep you want to go – your developers learn the current way to build Angular applications – standalone components, signals, reactive forms, routing, HttpClient and RxJS – and why things are done this way.
Everything is live-coded and practiced on your developers’ own machines. By the end the team has built a small but complete application, including tests with Vitest and Playwright, and knows how to continue in your project.
Agenda
The order and the depth of each block are adapted to your team – topics you already master are skipped, your questions get the time instead.
Angular Fundamentals
- Introduction to Angular and Modern Web Applications
- Standalone Components: Architecture and Advantages
- Change Detection, Signals and Zoneless Angular
- Project Setup with the Angular CLI
Components
- Creating and Structuring Standalone Components
- Understanding and Utilizing Lifecycle Hooks
- Signal Inputs, Outputs and Models: input(), output(), model()
- Components and Their Impact on Architecture
Templates, Data Binding, and Signals
- Property, Event, and Two-Way Binding in Templates
- Signals, computed() and linkedSignal()
- Control Flow with @if, @for and @switch
- Deferrable Views with @defer
- Performance Optimization with the OnPush Strategy
Component Communication
- Parent-Child Communication with Inputs and Outputs
- Shared Services for Reactive Data Management
- Signals for Cross-Component Communication
- Queries with viewChild() and contentChild()
HTTP Communication & Observables, RxJS
- Introduction to HttpClient for API Interactions
- CRUD Operations and Data Binding in Standalone Components
- Using Observables and Subscriptions
- Loading Data with resource() and httpResource()
- Functional HTTP Interceptors
- Using RxJS for Reactive HTTP Data Streams
Services, Dependency Injection, Pipes
- Creating and Using Angular Services
- Utilizing Dependency Injection
- Built-In and Custom Pipes for Data Formatting
- AsyncPipe vs Signals: Handling Data Streams
- Best Practices for Organizing Services
Forms and Validation
- Reactive Forms with Standalone Components
- Form Builder for Dynamic Form Creation
- Validation Logic: Built-In and Custom Validators
- Error Handling and Visual Feedback in Forms
- Integration with Backend Validations
Routing
- Standalone Components as Route Targets
- Lazy Loading with loadComponent and loadChildren
- Functional Guards and Resolvers
- Passing Parameters in Routes and Query Strings
Testing (Vitest, Playwright)
- Unit Testing Standalone Components with Vitest
- Mocking Services and HTTP Calls
- End-to-End Testing with Playwright
- Strategies for Testing Dependency Injection
- Automation in CI/CD Pipelines
Your trainers
Tim Honermann
Senior Software Engineer
Senior Software Engineer for Angular and Java, builds full-stack applications for clients and writes about it on his blog.
Full profile →
Fabian Gosebrink
Microsoft MVP, Google Developer Expert
Builds Angular applications with teams every week and has given 120+ conference talks on Angular, state management and architecture.
On Pluralsight he recorded the course Modern State Management with Angular Signals and NgRx SignalStore – the same topics, in video form.
Full profile →
“The training was excellent!”★★★★★
“Fabian has a very broad practical knowledge.”★★★★★
“You can clearly tell that Fabian works with Angular actively and professionally – he doesn’t “just” lecture about it!”★★★★★
“This was definitely one of the best trainings I have ever attended.”★★★★★
“We [...] could pull the updated code right in the course and try it out ourselves.”★★★★★
“Side notes and detailed explanations or repetition wherever necessary.”★★★★★
“Very well adapted to our needs.”★★★★★
“The NgRx concept was explained very well.”★★★★★
“Best course I have had so far.”★★★★★
“Although it was an advanced course, beginners could follow along well too.”★★★★★
Bring this training to your team
For your team only – remote or at your office, on dates that suit you, with examples from your own code base where it helps.
- up to 12 participants (more on request)
- from CHF 2,400 per day for the whole team
- On site: plus travel at cost
- Fixed quote within one business day
- Agenda as PDF – to forward to your manager
Newsletter
Only the latest articles and announcements.
No spam. Promised. By subscribing you agree to our privacy policy.
