Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Angular 2 Programming

Course Code



3 Days


Angular 2 is the next iteration of the AngularJS framework. It promises better performance and uses TypeScript programming language for type safe programming. Overall participants should see better productivity and manageability of a large project using Angular 2.
This course is designed for programmers or developers.
Upon completion of this course, participants will be able to:
  • Use TypeScript
Introduction to Angular 2
What is Angular 2?
Why Angular 2?
Scope and Goal of Angular 2
Installing and using Angular 2
Building Blocks of an Angular 2 Application
A simple application

Introduction to TypeScript and ES6
Introduction to TypeScript
The type system
Defining class and interface
Defining a module
Importing a module

What is a component?
Developing a simple component.
Templates for a component.
Component lifecycle

Data Binding
What is data binding
One way data binding
Two way data binding
Event binding

Working with Forms
Using Input Text Box
Using Radio Buttons
Using Checkbox
Using Checkbox - Advanced
Using Select
Using Select – Advanced
Disabling an Input
Detecting model changes using getter and setter

Basic Directives
What are directives?
Controlling Element Visibility
Adding and Removing an Element
Dynamically Changing Style Class
Setting Image Source
Setting Hyperlink Dynamically

Advanced Directives
Looping using ngFor
Conditional rendering using ngSwitch

Service and Dependency Injection
What is a service?
Defining a service
Injecting a service to a component
Application wide dependency injection
@Injectable classes
Multiple service instances
@Optional and @Host

HTTP Client
The HTTP providers
Injecting the providers
Making a GET call
Handling error
More about Observables
Making a POST request
Working with headers
Making sequential calls
Making parallel calls

Introduction to Custom Directives
Types of directives - component, structural and attribute
Creating a basic attribute directive
Using the attribute directive
Handling event from an attribute directive
Binding input to an attribute directive

Advanced Custom Directives
About structural directives
Understand how ngIf works
Using the <template> tag
Using asterisk
Creating your own structural directive
Using the structural directive
Binding input to a structural directive

Advanced Form Handling
Introduction to Form Validation
Validation and Model Binding
Input Type Validation
Validation Directives
A Note About "required"
Detecting Validation State
Showing Error Message
Other Status Variables
Styling Input Fields
Styling Other Areas

What is a pipe?
Example pipe usage.
Passing parameters to a pipe
Chaining pipes
UpperCasePipe and LowerCasePipe
Developing a custom pipe
Change detection from a pipe
Pure and Impure Pipes

Introduction to Single Page Application
What is a Single Page Application (SPA)?
How is it Any Different?
Why Create SPA?
It's Not All or Nothing
Challenges to SPA
Implementing SPA Using Angular 2
Simple SPA Using Visibility Control
SPA using Dynamic Templates for a Component
Example of Dynamic Template
SPA Using Routing

Why use routing?
Defining a route table
Navigation using hyperlink
Navigation using code
Supplying parameters to a route URL
Send Us a Message
Choose one