Angular Developer Training - Introduction

Course Description

This course is a comprehensive introduction to the Angular framework up to the latest version. It covers both the ES6 JavaScript syntax and Typescript needed to work with Angular. It gives practical examples of the main Angular concepts including Components, Directives, Dependency Injection, Pipes and Single Page Applications (SPA). Angular is a large framework and it can be intimidating to get started with because it uses both a new language, Typescript, and has a large range of concepts that need to be understood before you can get started. This course is the perfect introduction for people who have worked with web applications who are embarking on a project that requires Angular.

Duration: 5 days


Participants should be familiar with web application development concepts and have some knowledge of HTML, CSS and JavaScript.


This course is applicable for Angular 2 to the latest version. For Angular.js training, see our Angular.js Developer Training Course.

The Angular Development environment

Visual Studio Code
Integrated terminal - command line interface
What is node.js?
What is the relationship between node.js and Angular?
What is npm?
Installing the Angular CLI

Introduction to Angular

What is Angular?
Angular versions
Angular hello world
ng serve
Live reloading
Understanding the project layout
The main Angular files

Understanding TypeScript

What is Typescript?
Basic javascript (ES5) features that are important for Angular development
ES6 features that are used for Angular development
Typescript features that are used in Angular


What is a component?
What is a component framework?
ng generate
How do you customise / configure a component in html
How do we customise or configure components in Angular
@Input parameters


Angular template syntax
Attribute directives
Structural directives


Angular syntax for event handling
Event emitters
Creating a custom event
Adding a custom event handler

Compound Components

Creating a compound component Components can be nested Create a child component Create a parent component


What is a pipe?
Examine the built-in pipes
Chain two pipes together
Debugging by piping an object to json

Data Binding

Template variables
Passing a control to an event handler
Two way data binding

Creating a more complicated component

Having two modes of operation
Using *ngIf to show two different UIs
Using data binding to read updated values
Implementing a cancel button


Understanding CSS inheritance
Component CSS encapsulation
Global styles
Adding external css frameworks - font-awesome, bootstrap


The MVC (Model View Controller) family of design patterns
Separation of concerns
What is an Angular Service
Creating a data service
Using a service
Understanding dependency injection


RESTful web services
An external web service
Creating our own test web service
Adding HTTP support
Introduction to Observables
Asynchronous operations using Observables
Updating the data service to read from an external source

Single Page Applications

What is a Single Page Application (SPA)
Understanding the UX requirements of the Back button
Understanding the UX requirements for bookmarking a page
Introduction to routing
Angular Router
Setting up routes

Creating a working Single Page Application

Creating a project
Adding a bootstrap navigation bar
Routing using path parameters
Reading the path parameters
Adding in a data service
Master list view
Detail view

Whats new in Angular

Angular is under steady development, this module will cover the newer features that have been added to Angular in the latest release.


Angular Developer Training - Introduction 2024-03-10 Online
Angular Developer Training - Introduction 2024-10-07 Online

Angular *** JavaScript ** MEAN Web Programming Modern Web Development Web Development Front End Web Development Fullstack Web Development TypeScript**