Angular Developer Training - Introduction

Course Description

This course is a comprehensive, practical introduction to building applications with Angular. It is built around components, and around an application that grows across the week. Delegates have that application running on the first morning and write their own components into it on the first day. Every topic that follows is added as a new page: a component, a route, and an entry in the navigation. Delegates leave with a working Single Page Application containing a worked example of everything the course covers. Along the way they learn how a component holds data that changes, how components pass data to each other, how they are composed into screens, and how they draw on shared services and server data. The application is then rebuilt a second time using Bootstrap and NgBootstrap, with the emphasis on the finished result — proper navigation, modal dialogs, tooltips and notifications. By that point the Angular is familiar, so the attention goes on producing something of a quality you would be willing to show a customer. The course also covers the TypeScript needed to be productive in Angular, and every core concept in the framework — templates, directives, pipes, dependency injection, HTTP, forms and routing — with hands-on exercises throughout. The material is written against current Angular and teaches the framework as it is used today, so delegates can move straight onto a live project without unlearning anything.
5 Days
€1750.00
 

Prerequisites

Participants should be familiar with web application development concepts and have working knowledge of HTML, CSS and JavaScript. No prior Angular experience is required.

Versions

Taught against Angular 21 (LTS, supported to June 2027), with features introduced in Angular 22 identified where relevant. A dedicated module near the end covers the older patterns delegates will meet in existing codebases, so they can read and maintain code written before the current APIs.

For Angular.js training, see our Angular.js Developer Training Course.

What is Angular?

What Angular is and what it is for
The kind of application Angular is designed to build
What a framework gives you that a collection of libraries does not
Where Angular sits alongside the other options
Who maintains Angular, and what that means for a long-lived project
What you will have built by the end of the week

How Angular Works

One page, assembled by JavaScript — what the browser actually loads
The root component, and how the application starts
Building a screen as a tree of components
Templates: HTML with a little extra syntax
How data travels from your code onto the page
How a user action travels from the page back into your code
What the Angular CLI does to your code before the browser sees it
Where Node.js and npm fit in and where they do not

What is a Component?

A piece of the screen with its own template, logic and styles
What is a component framework?
The two halves of a component: the class and the template
The selector — using your component as an HTML element
How components nest to build a page
Why applications are put together this way
Identifying the components in an existing user interface

The Angular CLI

What is Node.js, and its relationship to Angular
What is npm — package.json and installing dependencies
Installing the Angular CLI
The commands you will use every day: ng new, ng serve, ng generate, ng build, ng test
Visual Studio Code and the Angular Language Service
The integrated terminal and command line interface
Angular DevTools

Creating a Hello World Application

ng new — creating your first project
Understanding the project layout
The main Angular files and what each one does
index.html, main.ts and the root component
ng serve and live reloading
Editing your first template and watching it update
Adding a second component and putting it on the page
Reading the errors the CLI gives you

Basic Component Features

ng generate component
The @Component decorator — selector, template and styles
Inline templates and styles vs separate files
Fields and methods on the component class
Interpolation — getting data from the class into the template
Calling a method from a template
Property binding
Event binding and the $event object
Component styles and how Angular keeps them local
Using one component inside another
Structuring an application as a tree of components

Adding Pages to the Application

Why an application is more than one screen
What is a Single Page Application, and how it differs from a set of linked HTML pages
The UX requirements of the back button
The UX requirements for bookmarking a page
The route configuration in app.routes.ts
RouterOutlet — where the current page appears
Adding a component, adding a route, and linking to it with routerLink
routerLinkActive for showing the user where they are
The route title, and the browser tab
A default route, and a wildcard route for pages that do not exist
A route with a path parameter — /users/99
Linking to a detail page from a list, and reading the parameter in the component

From this point on, every new topic in the course gets its own page in this application. Delegates leave the week with a working reference application containing a worked example of everything they have learned.


Understanding TypeScript

Fields on the component class — data that does not change
signal() — data that changes, and how the template stays in step
Reading a signal, .set() and .update()
computed() — values derived from other values
Where the screen updates come from, and why you never call a refresh
Keeping calculation out of the template
Choosing what a component should own
effect() — reacting to a change, and why you rarely need it

Component Data and State

Fields on the component class — data that does not change
signal() — data that changes, and how the template stays in step
Reading a signal, .set() and .update()
computed() — values derived from other values
Where the screen updates come from, and why you never call a refresh
Keeping calculation out of the template
Choosing what a component should own
effect() — reacting to a change, and why you rarely need it

Components Working Together

Passing data into a component with input()
Required inputs and default values
Sending data back out with output()
Handling a custom event in the parent
Two-way binding with model()
Building a parent and a child component
Building a compound component from smaller parts
Deciding where a piece of state belongs


Showing Data in Templates

Angular template syntax overview
Showing and hiding content with @if / @else if / @else
Repeating content with @for, the track expression and @empty
Loop context variables — $index, $first, $last, $count
Choosing between alternatives with @switch / @case / @default
@let — naming a value inside a template
Loading part of a page only when it is needed with @defer
Placeholder, loading and error content

A Dynamic Navigation Component

The problem with hand-maintained navigation links
Injecting the Router and reading its route configuration
Using the route title as the navigation text
Filtering out routes with no title, so internal routes stay out of the menu
Rendering the links with @for and routerLink
Why the route list is a plain field and not a signal
Extending the navigation as the application grows

This is the first time delegates inject something, and the first time they use route configuration as data rather than as setup. Both are picked up formally later in the week.

Directives and Pipes

What is a directive?
Attribute directives and what they are for
Class and style bindings
Built-in pipes: date, currency, decimal, percent, JSON, async
Chaining pipes together
Writing a custom pipe
Debugging by piping an object to JSON

Styling Components

Component styles and how Angular keeps them from leaking
Global styles and where they belong
Understanding CSS inheritance across component boundaries
CSS custom properties for theming
Modern CSS layout inside Angular components
Adding an external CSS framework
A first look at Angular Material

Services and Dependency Injection

The MVC family of design patterns and separation of concerns
What is an Angular service?
Creating a data service — @Injectable({ providedIn: 'root' })
Obtaining a service with inject()
Understanding dependency injection
Sharing state between components using a service
Holding application state in a service with signals
Injection tokens and configuration values

Talking to the Server

RESTful web services and HTTP fundamentals
Adding HTTP support with provideHttpClient()
Creating a local test API to develop against
httpResource() — fetching data, with the value, status and errors available to the template
Showing loading and error states
Reacting to changing request parameters
resource() — working with any asynchronous source
HttpClient and observables — an introduction, and where you will meet them
Functional interceptors — adding headers and handling errors in one place
Updating a data service to read from an external source

Forms

Building a form and collecting user input
Signal Forms — form() and the FormField directive from @angular/forms/signals (requires v21+; stable from v22)
Designing a form model, and type-safe field access
Schema-based validation
Displaying validation errors
Field state: touched, dirty, disabled, submitting
Handling submission
Reactive Forms — FormGroup, FormControl, FormBuilder and strongly typed forms
Choosing between the two, and how they work together

The Users Application

Pulling the week's work together into a coherent application.
Bringing the concept pages together behind a single navigation
A Users service — reading and writing a collection through httpResource()
A list of users, and clicking an id to open /users/99
The detail view, reading its id from the route
Creating, editing and deleting a user
Handling loading, empty and error states properly
Deferring a section of the page that is expensive to load
Building for production

Rebuilding with NgBootstrap

The same application again, this time with attention on the finished result. Building it twice is the point: the Angular is familiar by now, so the attention goes on quality.

Why build the same application a second time
Adding Bootstrap and NgBootstrap to a project
Importing NgBootstrap components and directives into your own components
Bootstrap navigation — navbar, responsive collapse, active state
Modal dialogs with the NgbModal service — confirming a delete, editing in place
Tooltips and popovers on buttons and controls
Toast notifications when an operation completes
Styling forms and validation messages with Bootstrap
Layout, spacing and visual consistency
Accordions, tabs and other components worth knowing about
What separates a demo from something you would show a customer

Reading Existing Angular Code

Angular has been in wide use for a decade, and most delegates will join a project containing code written against earlier versions. This module covers what that code looks like and how to work with it.

*ngIf, *ngFor and *ngSwitch — the older template syntax
ng-template and ng-container
@Input() and @Output() decorators, and EventEmitter
@ViewChild and @ContentChild
ngOnInit and the component lifecycle hooks
Constructor injection
NgModule, declarations and SharedModule — how applications used to be organised
HttpClientModule and RouterModule.forRoot()
Template-driven forms, ngModel and ngForm
Services built on BehaviorSubject
Karma and Jasmine tests
The automated migration tools, and what they can do for you

Angular Versions and What's Next

Angular versions and the release cadence
Long-term support and staying on a supported version
ng update
Automated testing, and where it is covered
Where to go next — the Advanced course and the Modernisation course
AngularJavaScriptMEANWeb ProgrammingModern Web DevelopmentWeb DevelopmentFront End Web DevelopmentFullstack Web DevelopmentTypeScript