Angular

Overview Learning objectives What you’ll learn Key facts Course syllabus FAQs What our customers say Get in touch

Course overview

Over four-days, you will build structured front-end applications using TypeScript, components, templates and services. You’ll also work through key Angular features, including routing, forms, HTTP communication and application testing, with practical exercises that reflect development tasks you are likely to face at work. The course enables stronger day-to-day delivery when creating, maintaining or extending Angular applications.

Angular development for front-end roles

This four-day course is for developers who already understand HTML, CSS and JavaScript, and now want to apply Angular in professional front-end development. You’ll learn how Angular projects are structured, how components, templates and services work together, and how to handle navigation, forms, API communication and testing. The course will benefit developers that are building on existing web development experience and looking to take on more Angular-focused work with greater technical confidence.

Learning objectives

Set up Angular projects
Structure component-based applications
Pass data between components
Use signals for state
Build responsive templates
Apply custom directives
Configure application navigation
Create validated forms
Connect applications to APIs
Test Angular code

What you’ll learn

Build the Angular skills needed to create front-end applications that are easier to structure, test and maintain. You will work with components, templates, services, routing, forms, HTTP communication and state management, using practical exercises to connect each feature to everyday development tasks. The course helps you produce clearer code, manage user interaction and support more reliable application delivery.

Angular project structure

Learn how Angular projects are created and organised, including the role of the Angular CLI, TypeScript and key project files. This gives you a clearer view of how Angular applications are structured, so you can locate functionality, understand dependencies and make changes without disrupting related parts of the application.

Components and services

Understand how components break an application into manageable sections and how services help share logic or data across the application. You will work with component communication, dependency injection and reusable code patterns, building the skills to separate responsibilities clearly across an Angular application. This helps make faults easier to trace, features easier to update and application logic easier to maintain as the codebase grows. bits, isolate issues more easily, update features and keep application logic in the right place.

Templates and interaction

Explore how Angular templates control what users see and how they interact with an application. You will use binding, events, pipes, flow control and template variables to present data clearly and respond to user actions. By the end of the training, you will have the knowledge to create interfaces that display the right information at the right time and are easier to adjust when requirements change.

HTTP and testing

Discover how Angular applications communicate with backend services using HttpClient, including requests, responses, parameters, headers and error handling. You will also practice testing components and services with Jasmine and Karma. These skills help you check how code behaves before it moves further through development, reducing uncertainty when changes are introduced.

What’s included

Instructor-led training over four days
Live virtual classroom environment
Hands-on exercises and live labs
All relevant course materials

Key facts

Certification

This course includes a course completion certificate.

Who it’s for

This course is suitable for developers with experience in HTML, CSS and JavaScript who want to build Angular applications.

Prerequisites

This course requires prior knowledge of JavaScript, along with familiarity in HTML and CSS.

Exam information

This course does not include an exam.

Optional extras

This course includes hands-on labs and access to learning materials for continued practice.

Pre-course

No preparation work is required for this course.

Course syllabus

Dive into the detail of the course by looking at the syllabus below.

Day one

Course introduction
- Administration and course materials
- Course structure and agenda
- Delegate and trainer introductions

Day one

Session 1: Introduction
- What is Angular?
- Installation
- The CLI
- TypeScript

Day one

Session 2: The basics
- Components
- Signals
- Templates
- Dependency injection

Day one

Session 3: Signals
- What is a signal
- Writable signal
- Computed signal
- Effects

Day two

Session 4: Components
- What is a component?
- Inline HTML & CSS
- HTML & CSS files
- Imports
- Selectors
- Styling
- Inputs
- Outputs
- Content projection
- Host elements
- Lifecycle
- Referencing component children
- Accessing the DOM

Day two

Session 5: Templates
- What is a template?
- Template vs HTML
- Interpolation
- Binding
- Event handling
- Control flow
- Pipes
- Template variables

Day three

Session 6: Directives
- What is a directive?
- Attribute directives
- Structural directives

Day three

Session 7: Dependency injection
- What is dependency injection?
- Creating a service
- Injectors
- Providing a dependency
- Injecting a dependency

Day three

Session 8: Routing
- The problem with SPAs
- What is routing?
- Installation
- How @angular/router works
- Routes
- Outlets
- Links
- Route state
- Guards

Day four

Session 9: Forms
- Form types
- A simple reactive form
- A simple template-driven form
- Reactive forms: the basics
- Reactive forms: grouping controls
- Reactive forms: validation
- Reactive forms: dynamic feedback
- Reactive forms: dynamic styling

Day four

Session 10: HTTP Client
- What is HttpClient?
- RxJS Observables
- Providing HttpClient
- Fetching data
- Mutating server state
- Setting URL parameters
- Setting request headers
- Accessing the response object
- Handling errors

Day four

Session 11: Testing
- Jasmine and Karma
- The testing setup
- Basic component testing
- Component binding
- Component with external files
- Component with dependency
- Component with async service
- Component with inputs and outputs
- Routing and routed components

FAQs

This Angular course helps developers understand how the framework is used to organise front-end applications, manage changing data and connect user interfaces to services. These FAQs cover the experience expected before attending, the technical areas taught and how the course supports applied development work.

What experience do I need before this Angular course?

You should already understand JavaScript and be familiar with HTML and CSS. This background is important because the course moves into Angular project structure, TypeScript, components, templates and services. Existing front-end knowledge helps you focus on how Angular organises application logic, data flow and user interaction.

Is this Angular course suitable for front-end developers?

Yes. The course is designed for developers and technical professionals who want to build or support Angular applications. It is most suitable if you already have web development experience and want to apply Angular more confidently when creating components, handling forms, configuring routes and connecting applications to backend services.

What practical Angular skills will I learn?

You will work with Angular CLI, TypeScript, components, templates, directives, services, routing, forms, HttpClient and testing. The course links these features to common development tasks, such as structuring application areas, passing data between components, validating user input and checking code behaviour before it moves further through development.

Does the course cover Angular forms and APIs?

Yes. The course covers reactive and template-driven forms, including validation, dynamic feedback and styling linked to user input. It also covers HttpClient, including fetching data, changing server state, setting parameters, working with request headers and handling errors when Angular applications communicate with backend services.

Is testing included in the Angular course?

Yes. The course introduces testing with Jasmine and Karma, including basic component testing, bindings, external files, dependencies, asynchronous services, inputs and outputs, and routed components. This helps you check how Angular code behaves and gives you a stronger basis for maintaining quality as applications change.

What our customers say

“The instructor was very knowledgeable and anything he didn't know, he would investigate and come with the explanation. That is not my first class with him and one of the reasons I actually book with this company.”

Caroline, Government

“Really informative course, structured to support all forms of learning and at a good pace.”

Owen, Graduate Trainee Engineer - Utilities

Why study with TSG?

25+ years' experience

Trusted by individuals, businesses and public sector organisations for over 25 years.

20,000+ learners trained

Join a network of learners focused on developing their software testing skills

98% customer satisfaction

TSG trainers are frequently rated as ‘good’ or ‘excellent’ by our learners

Speak to our team

Guidance from experienced advisors

If you’re unsure which course aligns with your technical requirements or career direction, we’ll help you assess your options and choose with confidence.

Get in touch

Build capability

Develop skills that support real delivery outcomes

From software testing to broader digital skills, we work with you to design learning that strengthens capability, improves performance, and supports long-term business goals.

Get in touch