Welcome to ONLC Training Centers

Angular 4 Introduction Course Outline

 (4 days)

Introduction to Angular 4 training covers everything you need to know to get started with this next generation of the Angular framework. Angular 4 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 4 applications.Working with data performing CRUD operations is covered calling real rest services.

Learning Objectives
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

Special Note to New Hampshire Residents
This course has not yet been approved by the State's Department of Education. Please contact us to get an update as to when the class should be available in New Hampshire.

Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Experience developing with AngularJS or Angular 2 (the prior versions) is not required.

Lab exercises provide essential and real world practical hands-on experience for each topic.

Course Outline

Chapter 1. Introducing Angular
What is Angular?
Central Features of the Angular Framework
Why Angular?
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

Chapter 2. Development Setup of Angular
Angular is Modular
Managing Angular Files and Dependencies
What is Node.js?
Application of Node.js
Installing Node.js and NPM
"Hello World!" Node app
Node Libraries
Node Package Manager (NPM)
Semantic Version Numbering
Package Version Numbering Syntax
Updating Packages
Uninstalling Packages
Installing Angular Packages
Angular CLI
Angular Development Overview
TypeScript Definitions
Testing Tools
Development Servers
Module Loaders
SystemJS Module Loader
WebPack Module Bundler
Additional Application Dependencies

Chapter 3. Introduction to TypeScript and ES6
Programming Languages for Use with Angular
TypeScript Syntax
Programming Editors
The Type System Defining Variables
The Type System Defining Arrays
The Type System Classes & Objects
Class Constructors
Class Constructors Alternate Form
Parameter and Return Value Types
Working with Modules
TypeScript Transpilation
var, let
and const - Defined
var, let and const - Usage
Arrow Functions
Template Strings
Template Strings Variables and Expressions
Template Strings Multiline
Generics - Class
Generics - Methods
Generics - Restricting Types
Generics - Restricting Types: Example

Chapter 4. Components in Angular
What is a Component?
An Example Component
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:

Chapter 5. Data and Event Binding
Binding Syntax
One-Way Output Binding
Binding Displayed Output Values
Two-Way Binding of Input Fields
Input Binding Examples
Binding Events
Binding Events Examples
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

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

Chapter 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

Chapter 8. Template Driven Forms
Template Driven Forms
Importing Forms Module
A Basic Angular Form
Binding Input Fields
Accessing the Form Object
Binding the Form Submit Event
The Submit Function
Basic HTML5 Validation - "required" Attribute
HTML5 vs. Angular Validation
Angular Validators
Angular Validation State
Validation State
Validation State
Displaying Validation State Using Classes
Disabling Submit when Form is Invalid
Submitting the Form
Binding to Object Variables
Additional Input Types
Select (Drop Down) Fields
Rendering Options for Select (Drop Down)
Date fields
Radio Buttons

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

Chapter 10. Angular Modules
Why 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

Chapter 11. Services and Dependency Injection
What is a Service?
Creating a Basic Service
What is Dependency Injection?
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
to Initialize Component Data
Using a Shared Service Instance
Injection Hierarchy - Shared Instance
Dependency Injection and @Host
Dependency Injection and @Optional

Chapter 12. HTTP Client
The Angular HTTP Client
Using The HTTP Client - Overview
Importing HttpModule
Importing Individual Providers into Services
Service Using Http Client
Service Imports
The Observable object type
What does an Observable Object do?
Making a Basic HTTP GET Call
Using the Service in a Component
The PeopleService Client Component
Client Component Code Review
Importing Observable Methods
Enhancing the Service with .map() and .catch()
Using .map()
Using .catch()
Using toPromise()
GET Request
GET Request with Options
POST Request
POST Request Example
Reading HTTP Response Headers

Chapter 13. Pipes and Data Formatting
What are Pipes?
More on Pipes
Formatting Changes in Angular
Using a Built-in Pipe
Built-In Pipes
Using Pipes in HTML
Chaining Pipes
Using Pipes in JavaScript
Some Pipe Examples
Decimal Pipe
Custom Pipes
Custom Pipe Example
Using Custom Pipes
A Filter Pipe
A Sort Pipe
Pipe Category: Pure and Impure
Pure Pipe Example
Impure Pipe Example

Chapter 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

Chapter 15. The Angular Component Router
Routing and Navigation
The Component Router
Traditional Browser Navigation
Component Router Terminology
Setting up the Component Router
Local URL Links
Browser pushState and <base href>
The app.routes.ts File
The app.routes.ts File - Example
Importing Routing in app.module.ts
A Basic App With Routing
App Routes
AppComponent - Code
AppComponent - Router Related Features
AppComponent - <router-outlet>
AppComponent - routerLinks
Programmatic Navigation
Basic Navigation
Passing Data During Navigation
Creating Routes with Route Parameters
Navigating with Route Parameters
Using Route Parameter Values
Retrieving the Route Parameter Synchronously
Retrieving a Route Parameter Asynchronously
Query Parameters
Query Parameters - Example Component
Query Parameters - queryParams
Query Parameters - Navigation
Retrieving Query Parameters Asynchronously
Problems with Manual URL entry and Bookmarking
Fixing Manual URL entry and Bookmarking
View outline in Word


Attend hands-on, instructor-led Angular 4 Introduction training classes at ONLC's more than 300 locations. Not near one of our locations? Attend these same live classes from your home/office PC via our Remote Classroom Instruction (RCI) technology.

For additional training options, check out our list of Courses and select the one that's right for you.

Microsoft Gold Partner
Class Dates
(click date for class times)
(click Enroll for locations)

Fee:  $1595

Savings options:

 CEA Apps Saver
Need a price quote?

Follow the link to our self-service price quote form to generate an email with a price quote.

Email Alert

Receive an email when this class is available as "Ready to Run" or "Early Notice" status.

Attend from your office or home

If you have high-speed internet and two computers you can likely take this class from your office or home.

Need a class for a group?

We can deliver this class for a private group at your location. Follow the link to request more information.

Attend computer classes from ONLC Training Centers Request a copy via mail


Class Format
Class Policies
Student Reviews

Bookmark and Share

First Name

Last Name