Angular Foundation Training

Angular Foundation Training

Published in 2018

This training offers a hands-on introduction to Angular, covering its core concepts, TypeScript integration, and practical applications. Over three days, you’ll learn to structure apps, generate components and modules with the CLI, and implement navigation. You’ll explore TypeScript features like inheritance and typing, fetch and display data, and work with Reactive Forms and Observables. By building a functional foosball app connected to a Node.js backend, you’ll gain the skills to create scalable and dynamic Angular applications.

Background

After the transition from Angular.js to Angular, there was a need for training focused on the new framework. To enable front-end developers, from beginners to advanced, to progress through the training, a structure was chosen where the first day focuses on the basics, which are then explored in greater depth during the following sessions. Over the years, the training has been kept up to date with the latest versions of Angular and has been organized both internally at Sogeti and for various clients.

Talk sections

Introduction & Getting Started

Explanation of the how and why of Angular, the concepts behind modules and components, and the structure of an Angular app. A project structure for an app is then outlined, which will be worked on throughout the course. Using the CLI, the project (a foosball app), its modules, and components are generated, and basic navigation/routing is set up. Final result: an app with a menu that allows switching between different components.

Angular Services & TypeScript

Presentation on the theory behind TypeScript, followed by a live-coding demo on inheritance, typing, and interfaces. New features in ES2015+ are also explained. Then, the process of fetching and displaying data in components (initially hardcoded) is explored. This is also applied to the foosball app through live coding.

Reactive Forms & Observables

A small Node.js backend is cloned and started, allowing data to be retrieved and sent. First, the options for creating forms are reviewed: template-driven or reactive forms. Next, a reactive form is built together in the foosball app. The data is then sent to the backend. Additionally, the hardcoded example data is replaced with asynchronously loaded data from the backend using Observables.

Logo Emiel KwakkelEmiel Kwakkel

Follow me

Made with ❤️ and

© 2026 Emiel Kwakkel. All Rights Reserved.
GitHubLinkedIn