Introduction to Angular 2 Programming
Request a Class


COURSE COST: $1495.00

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course


Angular 2 makes the creation of single page applications even easier that before. In this course developers will learn to use Angular Directives and to create Angular Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challenges of Single Page Applications and how to overcome those challenges using the Angular Router. The course also covers everything you need to know about Typescript - a programming language based on JavaScript that is used to create Angular 2 applications.


In this training, attendees will learn how to:

Create single page web applications using the MVC pattern of Angular
Understand how write and organize Angular code
Program Angular View Components and Services
Use Angular output, two-way, event and property bindings
Exchange data with network servers using the Angular HTTP Client
Work with Angular Pipes to format data
Create and work with Angular Forms
Angular Component Router
Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Experience developing with AngularJS (the prior version) is not required, but helpful.


*Course Cost listed does not include the cost of courseware or lunch. Course is subject to minimum enrollment to run. Course may run virtually as a Virtual Instructor-Led (VILT) class if the minimum enrollment is not met.


Module 1: Introducing Angular
Central Features of the Angular Framework
Scope and Goal of Angular
Angular vs. AngularJS
But Isn't It "Angular 2"?
Installing and Using Angular
Adding Angular and Dependencies to Your App
Building Blocks of an Angular Application
A Basic Angular Application
Basic App - index.html
Basic-App: Application Module File
Basic-App: Main Bootstrap File
Basic-App: The Component File

Module 2: Development Setup of Angular
Managing Angular Files and Dependencies
Application of Node.js
Node Libraries & Node Package Manager (NPM)
Installing, Updating, & Deleting Packages
Angular CLI
TypeScript Definitions
Testing Tools
Development Servers
Module Loaders
SystemJS Module Loader
WebPack Module Bundler

Module 3: Introduction to TypeScript and ES6
Programming Languages for Use with Angular
TypeScript Syntax
Programming Editors
The Type System Defining Variables, Arrays, & Classes & Objects
Class Constructors
Parameter and Return Value Types
TypeScript Transpilation
Functions such as: var, let, const, Defined, etc.
Arrow Functions
Template Strings
Generics - Class, Methods, & Restricting Types

Module 4: Components in Angular
Component Starter
Developing a Simple Login Component
Login Component: Add HTML
The HTML Component Template
The templateUrl property
Login Component: Add CSS Styling
Login Component: Hook Up Input Fields and Button
Login Component: Fields & Button in the Component Class
Component Decorator Properties
Component Lifecycle Hooks
Using a Lifecycle Hook:

Module 5: Data and Event Binding
Binding Syntax
One-Way Output Binding
Binding Displayed Output Values
Two-Way Binding of Input Fields
Binding Events
Setting Element Properties
Setting Properties: Examples
Passing Data into Components using @Input()
Passing Data from Child to Parent using @Output()
@Output() Example - Child Component
@Output() Example - Parent Component

Module 6: Attribute Directives and Property Bindings
What are Directives
Directive Types
Apply Styles by Changing Classes
Applying Styles Directly
Obsolete Directives and Property Binding
Controlling Element Visibility
Setting Image Source Dynamically
Setting Hyperlink Source Dynamically

Module 7: Structural Directives
Structural Directives
Adding and Removing Elements Dynamically
Looping Using ngFor
ngFor - Basic Syntax
ngFor - Full Template Syntax
Creating Tables with ngFor
ngFor Local Variables
ngFor Changes in the backing data source
Swapping Elements with ngSwitch
ngSwitch - Basic Syntax
ngSwitch - Full Template Syntax

Module 8: Template Driven Forms
Template Driven Forms
Importing Forms Module
Binding Input Fields & Submit Event
Accessing the Form Object
Basic HTML5 Validation - "required" Attribute
HTML5 vs. Angular Validation
Angular Validators
Displaying Validation State Using Classes
Disabling Submit when Form is Invalid
Binding to Object Variables
Additional Input Types: Checkboxes, Select, Date, & Radio Buttons

Module 9: Model Driven Forms
Setup for Model Driven Forms
Form Component Setup
Setup Main FormGroup
formControlName & Object
Getting Form Values
FormBuilder Form Initialization
Built-In & Custom Validators
Using Built-In and a Custom Validator
Useful FormGroup and FormControl Properties/Functions
Sub FormGroups - Component Class
Sub FormGroups - HTML Template
Why Use Sub FormGroups

Module 10: Angular Modules
Angular Built-in Modules
The Root Module
How to Create a Module
Feature Modules
@NgModule Properties
Using One Module From Another
Importing BrowserModule or CommonModule
Lazy-Loaded Modules
How to Organize Modules?
Component moduleID Property

Module 11: Services and Dependency Injection
Creating a Basic Service
What Dependency Injection Looks Like
Injecting Services
Dependency Injection Hierarchy Diagram
Using a Service in a Component: Dedicated Instance
Injection Hierarchy - Dedicated Instance
Using a Service in a Component: Dedicated Instance - Example Code
Using & onInit
to Initialize Component Data
Using a Shared Service Instance
Injection Hierarchy - Shared Instance
Dependency Injection and @Host or @Optional

Module 12: HTTP Client
The Angular HTTP Client
Importing HttpModule
Importing Individual Providers into Services
Service Using Http Client & Imports
The Observable object type
Making a Basic HTTP GET Call
The PeopleService Client Component
Importing Observable Methods
Enhancing the Service with .map() and .catch()Using toPromise()
GET Request
POST Request
Reading HTTP Response Headers

Module 13: Pipes and Data Formatting
Formatting Changes in Angular
Using a Built-in Pipe
Using Pipes in HTML
Chaining Pipes
Using Pipes in JavaScript
Decimal Pipe
Using Custom Pipes
A Filter & Sort Pipe
Pipe Category: Pure and Impure

Module 14: Introduction to Single Page Applications
What is a Single Page Application (SPA)
SPA Workflow
Traditional Web Application Capabilities
Single Page Application Advantages
SPA and Traditional Web Sites
SPA Challanges
Implementing SPA's Using Angular
Simple SPA Using Visibility Control
SPA Using Angular Components
SPA with Angular Components - Switching
SPA with Angular Components - The Displayed Component
Implement SPA Using an Angular Component Router

Module 15: The Angular Component Router
Routing and Navigation
Traditional Browser Navigation
Local URL Links
Browser pushState and
App Routes
Passing Data During Navigation
Creating Routes with Route Parameters
Navigating with Route Parameters
Retrieving the Route Parameter Synchronously & Asynchronously
Query Parameters - queryParams & Navigation
Retrieving Query Parameters Asynchronously
Problems & Fixes with Manual URL entry and Bookmarking