Introduction - Angular Developer Training

Enquire Now
X Close

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.


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

What's 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.

You might also be interested in:

Start Date
Price PP
No items found.