Advanced Angular is a course in building large applications with Angular 22 at an advanced level, covering advanced components and directives, dependency injection, signals with RxJS, NgRx SignalStore, authentication, Angular Material, multilingual sites with i18n, server-side rendering and a CRUD workshop with Node.js. It suits developers and IT managers who already have some Angular experience.
As an Angular application grows in pages, users and the number of developers on the team, simply making it work is no longer enough. You need a structure that is easy to maintain, clear responsibilities through dependency injection, systematic state management, access control and fast loading from the very first page. Current Angular has the tools for all of this: signals, zoneless change detection, @defer, server-side rendering with incremental hydration, and CSS-based animation that replaces the old animations package.
This course goes deep into Angular 22 at an advanced level, from advanced components and directives, in-depth dependency injection and signals with RxJS, to state management with NgRx SignalStore, authentication with interceptors and guards, Angular Material and the CDK, third-party library integration and multilingual sites with i18n, through to performance, testing and deployment, all through an order management workshop with CRUD against a Node.js API. (3 days, 6 hours per day, 18 hours in total, Advanced level.)
Course Details
This course is the 2026 edition of Advanced Angular, rewritten for Angular 22. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs built around an order management workshop that grows throughout the course. Advanced level. Learners structure a large application, build advanced components and directives, use dependency injection in depth, combine signals with RxJS, manage state with NgRx SignalStore, add authentication with interceptors and guards, use Angular Material, build multilingual pages with i18n, speed up loading with @defer and SSR, write tests with Vitest, and deploy alongside a Node.js API with Docker. They take home the source code for every lab.
Section 1: Lab: Structuring Large Angular Applications
Section 2: Lab: Advanced Components
Section 3: Advanced Custom Directives and Pipes
Section 4: Dependency Injection in Depth
Section 5: Lab: Signals with RxJS
Section 6: Lab: State Management with NgRx SignalStore
Section 7: Lab: Authentication and Authorisation
Section 8: Lab: Angular Material and the CDK
Section 9: The New Approach to Animation
Section 10: Lab: Integrating Third-Party Libraries
Section 11: Lab: CRUD with a Node.js API
Section 12: Multilingual Sites with i18n
Section 13: Performance and SSR
Section 14: Lab: Testing and PWA
Section 15: Workshop: Order Management System and Deployment
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
viewChild() reaches elements or components inside the component's own template, while contentChild() reaches content that a parent passes in through ng-content, known as content projection. In current Angular both are functions that return signals, so you read the value once it is ready without waiting for lifecycle hooks such as ngAfterViewInit. To get several at once, use viewChildren() or contentChildren(). Older code that uses the @ViewChild decorator still works.
NgRx is a set of state management libraries for Angular. Today NgRx SignalStore is widely used: you create a store with signalStore, compose it with withState, withComputed and withMethods, update data with patchState, and components read values directly as signals. The classic NgRx Store follows the Redux pattern, where components dispatch actions and reducers calculate the new state. It is still common in older systems and suits apps that need to track every change.
Use a functional HTTP interceptor: write a function that receives the request and next, clones the request and adds an Authorization header containing the user's token. Register it with provideHttpClient(withInterceptors([...])) in app.config.ts, and every request sent through HttpClient carries the token automatically. You should also handle 401 responses, and add a CanActivateFn or CanMatchFn guard to keep users who are not logged in out of protected pages.
It suits developers who already write Angular and want to build large applications, tech leads or IT managers who set standards for their team's projects, people who maintain older Angular systems, and full-stack developers who want to connect Angular with Node.js. You should have some Angular experience, such as components, routing and HttpClient, be confident with TypeScript, and understand web services and databases at a basic level.
You will be able to structure large Angular 22 applications, build reusable components and directives, use dependency injection in depth, manage state with signals, RxJS and NgRx SignalStore, add login and permissions with interceptors and guards, use Angular Material, build multilingual pages with i18n, speed up loading with @defer and SSR, write tests with Vitest and deploy alongside a Node.js API with Docker. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Yes. This course can be run in-house for your team, with content adapted to your work, such as upgrading your organisation's older Angular projects, setting project structure standards, or connecting to the back end your team already uses. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.
Node.js lets the JavaScript that developers know from web pages run on the server and on their own machines, from file-handling scripts and command-line tools to web APIs and real-time systems. Current versions include more built-in tools, such as fetch, a…
Microservices split a large system into small services that can be developed, deployed and scaled independently, so teams ship faster and scale only the parts under heavy load. Node.js suits this well because it is lightweight, starts quickly and handles…
The MEVN stack is a set of technologies for full-stack web development in a single language, JavaScript. It brings together MongoDB, a NoSQL database that stores data as documents, Express, a framework for building REST APIs on Node.js, and Vue.js, a popular…
