Call us at 1-978-250-4299
Hands On Technology Transfer

Angular Programming Course

Attend face-to-face, remote-live, on-demand or on site at your facility

On-Demand Training with Personal Facilitation

Developing Web Applications Using Angular

Delivery Options: Attend face-to-face in the classroom, remote-live or via on-demand training.


Face-to-face or remote-live: CDN$3,275

On-demand: CDN$1,975

Discounts: We offer multiple discount options. Click here for more informaiton.


Face-to-face or remote-live: 5 Days

On-demand: Approximately 35 hours of coursework with personal facilitation, to be completed in a four week span.


Face-to-face: Click here to view our schedules and register for in-person sessions.

Remote-live: Click here to register for live remote class sessions within a date range of your choosing.

On-demand: Click here to register for on-demand training with personal facilitation, on a start date of your choosing.

Students Will Learn

  • Using TypeScript and ECMAScript to create components
  • Using directives and components to define UI elements, routes and screens
  • Working effectively with component lifecycle events
  • Injecting dependencies to lessen coupling and increase testability
  • Unit testing Angular applications with Karma and Jasmine
  • Using property binding to link DOM elements with model data
  • Building Single Page Applications using Angular
  • Integrating forms with Angular
  • Organizing code using modules
  • Communicating with RESTful Web services

Course Description

This hands on programming course provides a thorough introduction to the Angular Framework for the purpose of web application development. Attendees will learn the fundamental skills necessary to use Angular for building web applications and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript to create object-oriented Angular applications, extending HTML by creating reusable UI components, implementing data-binding, designing and using custom structural and attribute directives, as well as creating and using Angular pipes for formatting and transforming data in the UI. Students will explore creating UX's (User Experiences) by designing Web animations and implementing both template-driven and reactive style forms. Students will learn to use Angular routing to create SPA's (Single Page Applications). The Angular training course includes coverage of using DI (Dependency Injection) and Angular services to provide business and data-access logic to the application, both locally as well as communicating with RESTful web services to provide CRUD database operations.

Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

Course Prerequisites

Knowledge of HTML, CSS and JavaScript equivalent to attending the Website Development with HTML5, CSS and Bootstrap and JavaScript Programming courses. Knowledge of jQuery is helpful, but not required.

Course Overview

Overview of Angular and the MVVM Design Pattern
  • Features and Benefits of Angular
  • Angular Architecture
  • MVVM Design Pattern Overview
  • Downloading Angular
  • Choosing an IDE
  • Creating a Simple Application with Angular
Using Visual Studio Code
  • Downloading and Installing Visual Studio Code
  • Generating Angular Projects with the CLI (Angular Command Line Interface)
  • Angular Project Structure, Files and Configuration
  • Debugging Angular Applications
  • Using the Terminal Window
Working with ECMAScript
  • Enhancements to Legacy JavaScript
  • New let to Declare Variables
  • Block Scoping
  • Using for of Loops
  • Literals and Strings
    • Extended Literal Support
    • Template Literals
    • Object Literal Changes
  • Function Enhancements
    • Default Parameters
    • Rest and Spread Operators
    • Arrow Functions/Lambdas
Working with TypeScript
  • Types
    • Working with Built-In Types
    • Custom Types
  • Setting Up and Using Node.js
  • Transpiling TypeScript into JavaScript
  • TypeScript Compiler Configuration
  • TypeScript Functions
    • Default and Optional Parameters
    • Function Overloading
    • Parameter Types and Return Types
Angular Modules
  • Using Modules to Create an Application
  • Default Modules
  • Bootstrapping an Application
  • Exporting Classes, Functions and Values
  • Limiting Scope
  • Grouping Modules
  • Specifying Module Dependencies
  • Organizing Code Files
  • Module Testing
  • Best Practices
Angular Components
  • Component LifeCycle
  • Component Templates to Define Views
  • Using Decorators to Define MetaData
  • Styling
    • Per-Component Styling
    • Defining Global Styles in angular.json
    • Adding Bootstrap Framework to an Angular App
  • View Encapsulation
    • ViewEncapsulation.ShadowDom
    • ViewEncapsulation.Emulated
    • ViewEncapsulation.None
  • Referencing DOM Elements with ElementRef
  • Lifecycle Hooks
    • OnInit, OnDestroy, OnChanges, DoCheck
    • AfterContentInit, AfterViewInit
    • AfterContentChecked, AfterViewChecked
  • Change Detection
  • Passing Data to Components
Component Templates and Data Binding
  • Basic Data Binding Concepts
  • Interpolation
  • One-Way Property Binding
  • Two-Way Property Binding
  • Event Binding
  • Custom Binding
    • Exposing Properties and Events to Parent Controls
    • Custom Property Binding
    • Custom Event Binding
Angular Directives
  • Built-In Directives
    • NgIf, NgFor, NgClass, NgStyle, NgSwitch, etc.
  • Building Custom Directives
    • Using the Renderer2 Service
    • ElementRef
    • Attribute Directives
    • Structural Directives
Working with Pipes
  • Text Casing Pipes
  • Formatting Numbers and Dates
  • Internationalization and Cultures
  • Restricting Data Collections with slice
  • Custom Pipes
    • Implementing the PipeTransform Interface
    • Pure vs Impure Pipes
    • Passing Parameters to Pipes
Defining and Consuming Services
  • Dependency Injection
    • Registering Providers with the Injector
    • Changes to Injection introduced in Angular 6
  • Creating a Service
  • Consuming a Service
Working with Web Services
  • Using HttpClient
  • Importing the HTTP Module
  • Creating Requests
  • Processing Responses
  • Web API
  • Using PostMan to Test the Server-Side Service
  • Interacting with a RESTFul Service
    • POST Requests
    • DELETE Requests
    • PUT Requests
    • HEAD Requests
  • Dealing with CORS (Cross Origin Resource Sharing)
Asynchronous Programming in Angular
  • Reactive Programming Model
  • The RxJs Library
    • Observables
    • Observers
    • Subjects
    • Subscriptions
    • Operators
  • Using Operators
    • Creation Operators
    • Filtering of Data Operators
    • Conversion of Data Operators
    • Math and Aggregate Operators
    • Utility Operators
    • Pipeable Operators
  • Using the async Pipe
  • Changes to RxJs in Version 6
Angular Forms
  • The ngNativeValidate Directive
  • HTML novalidate Attribute
  • Template Driven Forms
    • ngForm and ngModel in Forms
    • Input and Output Properties
  • Reactive-Driven/Model-Driven Forms
    • FormGroup
    • FormControl
    • FormArray
    • Validators Class
  • Using the FormBuilder Factory
  • Working with Form State
  • Client-Side Forms Validation
Angular Routing and Navigation
  • Overview of Routing
  • Implementing Single Page Applications (SPAs)
  • Location Strategies
  • Client-Side vs Server-Side Routing
  • Working with the Component Router
  • Adding Router Imports
  • Performing Router Configuration
  • Using Router State
  • Redirects
  • Routing Parameters
  • Router Lifecycle Events
  • Nesting Routes
  • Routing Guards
    • Defining a Guard
    • Registering Guards
    • Securing Routes
    • CanActivate Guard
    • CanActivateChild Guard
    • CanDeactivate Guard
    • CanLoad Guard
Unit Testing and TDD with Angular
  • TDD vs End-to-End Testing
  • Jasmine Testing Framework
    • Defining Expectations
  • Running Tests in Karma
  • Using the Angular Unit Test Framework
    • Fulfilling Dependencies
    • Mocking Out Data
    • Creating Testing Fixtures
  • Testing Services and HTTP
  • Using Test-Doubles (Mocks, Stubs and Spies)
  • Testing Components
  • Testing Forms
The Angular Animation System
  • The Web Animations API
  • States and Transitions
  • Entering and Leaving
  • Animating Properties
  • KeyFrames
  • Parallel Animation Groups
Building and Deploying Applications
  • Developing a Deployment Strategy
  • Managing Dependencies
  • Tree Shaking
  • Transpiling
  • Linting

Related Courses

Course Benefits

  • Course materials include student guide, hands-on lab manual and USB flash drive for examples and lab work
  • Students receive a certificate of completion at the end of class
  • Students can retake any portion of a class that has been completed, within 12 months at no extra cost
  • There are no registration fees or cancellation fees


Overall I enjoyed the class and the environment! The instructor did a fantastic job. He was very knowledgeable and extremely helpful. I will definitely recommend HOTT to my organization.
— J.B.,Inovalon, LLC.

This was a fantastic class. The instructor was entertaining, informative and extremely helpful. He made the class fun and interesting. It is extremely impressive how much he knows and how he works to cater to the needs of every student.
— E.S., Outbrain

Course Schedule

Choose a city below to view a schedule of courses. Attend regularly scheduled classes across Canada, or attend via our Remote-Live and On-Demand training options.