Angular Developer Training - Introduction

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