55267 : Mastering Angular

55266 : Building web apps with Angular and TypeScript
SPC : Spring Core Training

55267 : Mastering Angular

This training will take you from being an average Angular developer to a great one. You’ll gain more insight in the workings of Angular and you’ll explore more advanced programming techniques like RxJS and working with Redux. Advanced Forms will hold no secrets and you will acquire the assets to make your Angular application production ready.


The duration of the program :

Instructor Led : 24 h

Live Online
Instructor Led  : 24 h



Audience Profile
This course targets professional web developers that really want to master Angular. Participants of this course need to have a decent understanding of Angular and TypeScript.


At Course Completion
·         Work effectively with Reactive Extensions.

·         Improve performance of an Angular application.

·         Use ngrx to apply the redux pattern to an Angular application.

·         Simplify architecture with smart and dumb components.

·         Creating an efficient structure for large applications.

·         Work with more advanced forms.

·         Add server-side rendering with Angular Universal.

Module 1: Reactive Extensions for JavaScript
Reactive programming is a world on its own and is not necessarily tied to Angular. However Angular uses RxJS in many of its APIs, so we must have a proper understanding of what it means to write reactive code. RxJS has a steep learning curve. But once you master it, there is no going back.

·         What are Reactive Extensions

·         Observable and Observer

·         Subjects

·         Cold versus Hot Observables

·         Making Async Calls

·         Combining Observables

·         Error Handling

·         Dealing with Backpressure

Lab 1: Search Spotify

·         Baby steps

·         Debounce

·         Calling an async method

·         Cancellation

·         Error handling

·         Combining streams

After completing this module, students will be able to:

·         Deal with asynchronous collections.

·         Use various operators to transform and combine observables.

·         Deal with exceptions and cancellation.


Module 2: Change Detection
This module will teach you about the internals of Angular. This knowledge is primarily useful for performance tuning and debugging strange behavior.

·         Zones

·         How Change Detection Works

·         Immutables and Observables

Lab 1


After completing this module, students will be able to:

·         Debug strange behavior with change detection.

·         Think about optimization strategies concerning change detection.


Module 3: State management with Redux
With the increasing complexity of client-side applications, a lot of state has to be kept. It’s quite a challenge to keep all state consistent. Redux introduces a pattern to manage this state in a convenient way, while keeping your UI up to date as well.

·         Why Redux?

·         Smart & dumb components

·         Major Principles

·         The Store, Actions and Reducers

·         Tools

Lab 1: Redux Todo App

·         The Store

·         Actions and Action Creators

·         Reducers

·         Reading data and dispatching events

·         Debuggin using the Redux DevTools

After completing this module, students will be able to:

·         Have a decent understanding of the redux pattern. The actual/optimal implementation will be done with ngrx.

Module 4: Bringing Redux to Angular with ngrx
ngrx is an implementation of Redux for Angular. It puts the theory of the previous module to practice.

·         Using RxJS within Redux

·         Efficient Slicing

·         Using Async Pipes

Lab 1

After completing this module, students will be able to:

·         Have an overview of ngrx.


Module 5: The ngrx Store
This module explains the details of the store in ngrx.

·         Responsibilities

·         Normalizing Data

·         Initializing the Store

Lab 1

After completing this module, students will be able to:

·         Create an ngrx store in an effective way.

·         Avoid redundancy in the store.


Module 6: ngrx Reducers
This module explains how reducers work and how to make them more manageable. Also, you will lean how to deal with side-effects.

·         Useful Operators

·         Splitting Up Reducers

·         ngrx Effects

Lab 1: Spotify Reducers

·         Playlist action and reducers

·         The ‘recent’ list

·         The search actions

·         Displaying tracks

·         Combining reducers

After completing this module, students will be able to:

·         Create a reducer for ngrx.

·         Split up complex reducers into manageable children.

·         Deal with side-effects like async calls.


Module 7: Smart and Dumb Components
Should everyone be able to talk everything? No! Here we learn how to avoid chaos by splitting up our component into smart and dumb ones.

·         Characteristics of Dumb Components

·         Characteristics of Smart Components

·         Performance Impact

Lab 1: Spotify Dispatch and Select

·         Smart and dumb components

·         Selecting in the Playlist component

·         Selecting in the Recent component

·         Dispatching from the App component

·         Search

·         View Tracks

After completing this module, students will be able to:

·         Re-organize components into smart and dumb components.

·         Hook up components to the ngrx store.


Module 8: Structuring an Application
Applications grow larger, code bases become unmanageable. Unless you structure them right. This module will show you how.

·         Domain, Routing, Core and Shared Modules

·         Exporting and Providing

·         Clean Imports

·         Creating Libraries

Lab 1: Struturing the Weather App

·         Creating modules

·         Creating Feature Components

·         Set up routing

·         Services

·         Clean imports

·         Using shared module

·         Using a library

After completing this module, students will be able to:

·         Organize potentially large applications into the different types of modules.

·         Split up large applications into libraries.

·         Organize imports in a clean fashion.


Module 9: Forms Advanced
This module explains how to work with dynamic forms. These are forms that change as the user provides information. Using nested forms allows for more manageable chunks of code.

·         Dynamically Adding Elements

·         FormArray

·         Nested Forms

Lab 1: FormArray and Nesting

·         Working with FormArray

·         Nesting Forms

After completing this module, students will be able to:

·         Build dynamic forms.

·         Split up complex forms into smaller chunks.


Module 10: Angular Universal
Angular takes a lot of measures to make your app high-performant. But you can take it a bit further, especially when it comes to load times. In this Module you will learn about Ahead-Of-Time compilation and hot loading using Angular Universal. Here you’ll learn the difference between a good and a great application and how to please the elders of the internet.

·         Server-side rendering with Angular Universal

·         Hot-Loading with preboot

Lab 1:

After completing this module, students will be able to:

·         Add server-side rendering to their Angular application.

Participants of this course need to have a decent understanding of Angular and TypeScript.

None certification path.

Location Dates Time (UTC+2 ) Delivery Format Language
Live Online*, Athens, Thessaloniki Instructor Led Greek/English

* Σύγχρονη εξ αποστάσεως εκπαίδευση με εισηγητή – Virtual Class

    Με την συμπλήρωση της φόρμας αποδέχεστε την Πολιτική
    Προσωπικών Δεδομένων της Infolab και συγκατατίθεστε όπως η εταιρεία χρησιμοποιήσει
    τα προσωπικά σας δεδομένα για τη διαχείριση του αιτήματός σας
    και την επικοινωνία μαζί σας προς το σκοπό αυτό. Μπορείτε να
    ανακαλέσετε ανά πάσα στιγμή τη συγκατάθεσή σας σύμφωνα με
    όσα καθορίζονται στη Πολιτική Προσωπικών Δεδομένων της