angular training course

Angular 24 – 28 July

Our Angular Training Course is intended for front-end developers who are familiar with Javascript and want to master Angular to move a gear up. Angular is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices.



Further training


MEAN Stack


Intended Audience

Front end developers who found that JavaScript is inadequate to develop a rich, fully-fledged front-end. Our Angular Training Course starts with the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features Angular, going in-depth to give you the knowledge you need.

Course Material

Provided in electronic format – we do have an extension monitor for you in our training room.

Course Info


HTML, JavaScript Review

  • HTML Elements
  • HTML Attributes
  • Attributes without values
  • Attributes with Literal values
  • HTML Element Content
  • Document Structure
  • Bootstrap Classes (Contextual, Margin, Padding, Element Sizes)
  • Styling Bootstrap Tables
  • Bootstrap Forms
  • Bootstrap Grids (Responsive, Simplified)
  • Example Project Preparation
  • Script Element
  • Functions
  • Variables and Types
  • JavaScript Operators
  • Arrays
  • Objects (Literals, Methods)
  • Defining Classes
  • Getters and Setters
  • Class Inheritance
  • Modules
  • Importing Specific Types
  • Renaming Imports
  • Importing All of the Types in a Module
  • Type Annotations
  • Properties and Variables
  • Specifying Multiple Types or any Type
  • Using Tuples
  • Indexable Tuples
  • Access Modifiers

Building A Real App

  • Folder Structure
  • NPM Packages
  • Restful Web Service
  • Index.html
  • Root Component
  • Root Module
  • Bootstrap File
  • Data Model
  • Starting The Store
  • Adding Store Features

Orders and Checkout

  • Creating The Shopping Cart
  • Adding URL Routing
  • Processing Orders
  • Using RestFul Web Service


  • Module
  • Routing System
  • Navigating Admin URL
  • Implementing Authentication
  • Structuring the Admin Feature
  • Implementing the Product Editor


Data Bindings

  • Data Bindings (One-way, Property, Attribute, Classes, Styles)
  • Built-in Directives (ngIf, ngSwitch, ngFor, ngTemplateOutlet)
  • One-way Data Binding Restrictions

Events and Forms

  • Event Binding
  • Two-way Data Bindings (ngModel Directive)
  • Form Data Validation
  • Entire Form Validation
  • Summary Validation Messages
  • Disabling the Submit Button
  • Model-Based Forms
  • Form Model Classes
  • Using the Model for Validation
  • Generating the Elements from the Model
  • Custom Form Validators

Attribute Directives

  • A Simple Attribute Directive
  • Applying a Custom Directive
  • Accessing Application Data in a Directive
  • Reading Host Element Attributes
  • Using a Single Host Element Attribute
  • Creating Data-Bound Input Properties
  • Responding To Input Property Changes
  • Binding To a Custom Event
  • Creating Host Element Bindings
  • Creating a Two-Way Binding on the Host Element
  • Exporting a Directive for Use in a Template Variable

Structural Directives

  • A Simple Attribute Directive
  • Applying a Custom Directive
  • Accessing Application Data in a Directive
  • Reading Host Element Attributes
  • Using a Single Host Element Attribute
  • Creating Data-Bound Input Properties
  • Responding To Input Property Changes
  • Binding To a Custom Event
  • Creating Host Element Bindings
  • Creating a Two-Way Binding on the Host Element
  • Exporting a Directive for Use in a Template Variable



  • Structuring an Application With Components
  • Creating New Components
  • Defining External Templates
  • Using Data Bindings in Component Templates
  • Using Input Properties to Coordinate Between Components
  • Using Directives in a Child Component Template
  • Using Output Properties To Coordinate Between Components
  • Projecting Host Element Content
  • Completing the Component Restructure


  • Installing The Internationalization PolyFill
  • Registering a Custom Pipe
  • Applying A Custom Pipe
  • Combining Pipes
  • Creating Impure Pipes
  • Formatting Numbers
  • Formatting Currency Values
  • Formatting Percentages
  • Formatting Dates
  • Changing String Case
  • Serializing Data as JSON
  • Slicing Data Arrays


  • The Object Distribution Problem
  • Distributing Objects as Services Using Dependency Injection
  • Preparing The Service
  • Preparing Dependent Components
  • Registering the Service
  • Reviewing the Dependency Injection Changes
  • Declaring a Dependency in a Pipe and in Directives
  • Isolating Components Using Services and Dependency Injection
  • Preparing and Registering The Service
  • Preparing The Dependent Component
  • Updating the Root Component
  • Updating The Child Components

Service Providers

  • Using The Class Provider
  • Using Opaque Tokens
  • Understanding the useClass property
  • Resolving a Dependency with Multiple Objects
  • Using the Value Provider
  • Using the Factory Provider
  • Using The Existing Service Provider
  • The Limitations of Single Service Objects
  • Creating Local Providers In a Directive
  • Creating a Local Provider for All Children of an Object
  • Creating a Local Provider for View Children
  • Restricting the Provider Search
  • Skipping Self-Defined Providers


  • The Imports Property of the Root Module
  • The Declarations Property of the Root Module
  • The Providers Property of the Root Module
  • The Bootstrap Property of the Root Module
  • The Model Module Definition
  • Other Classes In The Application
  • Updating The Root Module
  • Creating a Utility Feature Module
  • Creating a Feature Module With Components



  • Configuring Packages
  • Model Module
  • Core Module
  • Messages Module
  • The Angular Bootstrap
  • The Reactive Extensions Module
  • The HTML Document

Reactive Extensions

  • Understanding Observables
  • Understanding Observers
  • Understanding Subjects
  • Using The Asynch Pipe
  • Scaling Up Application Feature Modules
  • Filtering Events
  • Transforming Events
  • Using Different Event ObJects
  • Receiving Only Distinct Events
  • Using a Custom Equality Checker
  • Taking and Skipping Events

Making Asynchronous HTTP Requests

  • Understanding RESTful Web Services
  • Replacing the Static Data Source Service
  • Setting Up the HTTP Request
  • Processing the Response
  • Configuring the Data Source
  • Using The Rest Data Source
  • Saving and Deleting Data
  • Consolidating HTTP Requests
  • Making Cross-Origin Requests
  • Using JSONP Requests
  • Configuring Request Headers
  • Handling Errors
  • Generating User-Ready Messages
  • Handling the Errors

Routing and Navigation – Starting

  • Disabling The State Change Event Display
  • Creating A Routing Configuration
  • Creating the Routing Component
  • Updating The Route Module
  • Adding Navigation Links
  • Understanding The Effect Of Routing
  • Handling Route Changes in Components
  • Using Multiple Route Parameters
  • Using Optional Route Parameters
  • Navigating in Code
  • Receiving Navigation Events
  • Removing The Event Bindings and Supporting Code


Routing and Navigation – Expanding

  • Adding Components to the Project
  • Using Wildcards in Routes
  • Using Redirections in Routes
  • Responding to Ongoing Routing Changes
  • Styling Links for Active Routes
  • Creating the Child Route Outlet
  • Accessing Parameters from Child Routes

Routing and Navigation – Guarding

  • Guarding Routes
  • Delaying a Resolver Service
  • Creating, Registering and Applying a Resolver Service
  • Displaying Placeholder Content
  • Using a Resolver to Prevent URL Entry Problems
  • Preventing Navigation With Guards
  • Preventing Route Activation
  • Consolidating Child Route Guards
  • Preventing Route Deactivation
  • Loading Feature Modules Dynamically
  • Creating a Route to Dynamically Load a Module
  • Using a Dynamically Loaded Module
  • Guarding Dynamic Modules with a Loading Guard
  • Targeting Named Outlets
  • Creating Additional Outlet Elements
  • Navigating when Using Multiple Outlets


  • Adding the Animations Polyfill
  • Disabling The HTTP Delay
  • Simplifying the Table and Routing Configuration
  • Defining Style Groups
  • Defining Element States
  • Defining State Transitions
  • Defining The Trigger
  • Applying The Animation
  • Testing The Animation Effect
  • Understanding The Built-in Animation States
  • Understanding Element Transitions
  • Creating Transitions for Built-in States
  • Animating Element Addition and Removal
  • Controlling Transition Animations (Timing Function, Initial Delay, Additional Styles, Parallel Animations)
  • Animation Style Groups
  • Defining Common Styles
  • Using Element transformations, CSS Framework Styles, Animation Trigger Events

Unit Testing

  • Configuring Karma, TypeScript
  • Creating a Simple Unit Test
  • Starting the Tools
  • Working with Jasmine
  • Testing an Angular Component
  • Configuring the TestBed for Dependencies
  • Testing Data Bindings
  • Testing a Component with an External Template
  • Testing Component Events
  • Testing Output Properties
  • Testing Input Properties
  • Testing with Asynchronous Operations
  • Testing an Angular Directive


Duration and pricing

In Pricing Group A


  • Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
  • You may sit for our competency assessment test and on passing you will obtain our competency certificate.
  • Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R2950.


You can download the course registration form on our home page or by clicking here

You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Please email us

On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.

image_pdfDownload as pdfimage_printPrint this page