Angular JS

Our AngularJS Training Course is intended for front-end developers who are familiar with Javascript and want to master AngularJS to move a gear up. AngularJS 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 AngularJS 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 AngularJS, going in-depth to give you the knowledge you need.

Course Material


Course Info



  • What is Angular 2?
  • Creating an Angular 2 Project
  • Got Setup Issues (with Angular 2 CLI)?
  • Editing our First App
  • Understanding the Project Structure
  • Why TypeScript? What is TypeScript?

TypeScript Introduction (for Angular 2 Usage)

  • Introduction
  • Using Types
  • Classes
  • Interfaces
  • Generics
  • Wrap up & Modules
  • Deep dive into TypeScript

Components, Templates & Databinding

  • Getting Started with Components
  • How an Angular 2 App gets started
  • Understanding AppModules
  • Using Templates & Styles
  • First Summary
  • Creating a new Component
  • About Unique Selectors
  •  Using multiple Components
  • View Encapsulation & Styling
  • Inserting Content with ng-content
  • Databinding Overview
  • String Interpolation
  • Property Binding & Event Binding Overview
  • Property Binding
  • Binding to Custom Properties
  • Event Binding
  • Binding to Custom Events
  • More Information on Property & Event Binding
  • ngModel and AppModules
  • Two-Way Binding
  • The Component Lifecycle
  • Component Lifecycle Usage Examples
  • Template Access with Local References, ViewChild and ContentChild

Project – Components & Databinding

  • Project Setup
  • Creating the Header Component
  • Creating the Recipes Component
  • Creating Recipe Model & List Component
  • Recipe Detail & Databinding
  • Shopping List Component


  • What are Directives?
  • Attribute Directives
  • Building a Custom Attribute Directive
  • Element Interaction with HostListener & HostBinding
  • HostListener: Passing Data
  • Directive Property Binding
  • *ngIf
  • *ngFor
  • ngSwitch
  • Angular 2’s De-Sugaring Mechanism
  • Building a Custom Structural Directive
  • Using NgModules

Project – Directives

  • Ingredients List with *ngFor
  • Custom Dropdown Directive


Debugging an Angular 2 Application

  • Introduction
  • Chrome Debugger & Sourcemaps
  • If you don’t find the TypeScript Sourcemaps
  • Augury

Services & Dependency Injection

  • What are Services?
  • Example: Logging Service
  • What is Dependency Injection?
  • Example: Injecting the Logging Service
  • Multiple Instances vs One Instance
  • Services & AppModules
  • Injecting Services into Services
  • Using Services for Cross-Component Interaction

Project – Services & Dependency Injection

  • Creating the Recipe Service
  • Creating the Shopping List Service
  • Cross-Service Communication
  • Cleanup


  • Introduction to the Angular 2 Route
  • Angular 2 Router Version & Changes
  • Setting up Routes
  • Loading Components
  • Navigation with Links
  • Understanding Navigation Paths
  • Imperative Routing (Triggered in Code)
  • Route Parameters
  • Extracting Route Parameters
  • Query Parameters
  • Query Params Changes in latest Router Version
  • Extracting Query Params
  • Query Parameters and the routerLink Directive
  • Passing Fragments and Preserving Query Params/ Fragments
  • Extracting Fragments in Code
  • Child Routes
  • Redirecting Request
  • Styling Active Route Links
  • Using Guards with AppModules
  • Guards: CanActivate
  • Guards: CanDeactivate
  • Routing-Cheat-Sheet.pdf
  • Routing –
  • Location Strategies

Routing Project

  • Introduction
  • Setting up the Main Routes
  • Adding Links to Navigate
  • Using Child Routes in the Recipe Section
  • Navigating between Child Routes
  • Extracting Recipe Data from Route Params
  • Styling the Active Recipe
  • Wiring “Edit” and “Delete” up
  • Finishing Touches and some Cleanup



  • Introduction to Forms in Angular 2
  • Template-Driven Approach Basics
  • Add FormsModule to your AppModule
  • Registering Controls (Template-Driven)
  • Submitting a Form and Using the Output (Template-Driven)
  • Form Properties
  • Input Validation (Template-Driven)
  • Form State & CSS Classes (Template-Driven)
  • Default Values with ngModel (Template-Driven)
  • Two-Way Binding with ngModel (Template-Driven)
  • Form Groups (Template-Driven)
  • Radio Button Controls (Template-Driven)
  • Using the Form State / Providing a better UX (Template-Driven)
  • The Data-Driven (Reactive) Approach (Intro)
  • Creating a Form (Data-Driven)
  • Important Changes with AppModules
  • Synchronizing HTML and the Angular 2 Form (Data-Driven)
  • Submitting a Form and Using the Output (Data-Driven)
  • Input Validation (Data-Driven)
  • Built-in Validators
  • Working with the State of the Form
  • Form Groups (Data-Driven)
  • Radio Buttons (Data-Driven)
  • Form Arrays / Arrays of Control (Data-Driven)
  • Creating a Form with the FormBuilder (Data-Driven)
  • Creating Custom Validators (Data-Driven)
  • Custom Asynchronous Validators (Data-Driven)
  • Listening to Status & Value Changes
  • Resetting Forms

Forms Project

  • Angular 2 Forms Usage
  • Shopping List Form HTML Setup (Template-Driven)
  • Adding & Editing Mode
  • Submitting the Shopping List Form
  • Selecting Items & Property Binding
  • Displaying Data with ngModel
  • Editing Items
  • Deleting Items & Clearing the Form
  • Editing & Adding Recipes (Intro)
  • Recipe Form – Preparation – Fetching the Active Recipe
  • Creating the Recipe Form with the Data-Driven Approach
  • Synchronizing the HTML Code with the Form
  • Submitting the Form and Editing Recipes
  • Managing Recipe Ingredients


  • What are Pipes?
  • Using Pipes
  • Parametrizing Pipes
  • Pipe Documentation
  • Chaining Pipes
  • Custom Pipes
  • Important Adjustment: Just use “args”
  • Example: Creating a Filter Pipe
  • Using NgModules
  • “Pure” Pipe Limitations
  • “Impure” Pipes
  • The Async Pipe



  • Required Adjustments in this Module
  • Http & Observables
  • Demo Data Source: Firebase Setup
  • Sending a GET Request
  • Using NgModules
  • The Power of Observables Operators – Map(ping Data)
  • Sending a POST Request
  • Retrieving and Transforming Data with Observables
  • Using the Async Pipe
  • Error Handling with Observables

Http Project

  • Http Intro & Setup
  • Storing Recipes on the Server (POST)
  • Getting and Changing Recipes (GET and PUT)
  • Finishing Touches & Bugfixes

Angular 2 Release Version / updated CLI

  • Updating the SystemJS CLI (beta.10)
  • NgModule Overview

Authentication & Route Protection

  • Required Adjustments in this Module
  • Introduction
  • Setting up Routes
  • Backend (Firebase) Setup
  • User Signup
  • User Signin & Managing the User State
  • User Logout
  • Protecting a Route from Unauthorized Access
  • Finishing Touches
  • How it looks using Angular 2.0 Final
  • Enhancing the App with Observables Magic!

Angular 2 Applications for bigger Projects

  • Introduction
  • Using Feature Modules
  • Creating a Feature Module
  • Creating a Feature Module for Child Routes
  • Lazy Loading of Routes
  • Implementing Lazy Loading
  • Using Lazy Loading to load the ShoppingListModule
  • Using Shared Modules
  • Using a Core Module
  • Understanding Module Encapsulation
  • When to use which Module
  • Diving Deeper into Modules
  • Performance and File Size Improvements with Offline (Ahead-of-time) Compilation
  • Adding Ahead-of-time Compilation to your Workflow

Angular 2 Animations

  • Introduction
  • Setting up the Starting Project
  • Animations Triggers and State
  • Switching between States
  • Transitions
  • Advanced Transitions
  • Transition Phases
  • The “void” State
  • Using Keyframes for Animations
  • Grouping Transitions
  • Using Animation Callbacks


Deploying an Angular 2 Application

  • About the New Project Structure (same Video as in Custom Project Module)
  • Intro & What to Deploy
  • Setting up an App for Deployment
  • Deploying to Github Pages with the Angular 2 CLI
  • Deploying to Github Pages Manually
  • Deploying to AWS S3
  • Deployment – Cheat Sheet

Angular 2 CLI

  • Intro
  • Installation
  • New Project: ng new and ng init
  • Building your Project: ng build & ng serve
  • Understanding the Project Structure
  • Linting your Code: ng lint
  • Unit Tests: ng test
  • Managing Project Content: ng generate & ng destroy
  • Putting it into Production: ng build -prod and ng github-pages:deploy
  • Using Third-Party packages with the CLI
  • Learning More: ng –help and Wrap Up

Unit Testing in Angular 2 Apps

  • Introduction
  • Why Unit Tests?
  • Analyzing the Testing Setup (as created by the CLI)
  • Running Tests (with the CLI)
  • Adding a Component and some fitting Tests
  • Testing Dependencies: Components and Services
  • Simulating Async Tasks
  • Using “fakeAsync” and “tick”
  • Isolated vs Non-Isolated Tests
  • Further Resources & Where to Go Next

Example Project

  • Introduction
  • Creating the Project
  • Setting up the Angular 2 App
  • Adding Development Dependencies and Types
  • Setting up TypeScript Compilation (tsconfig) and the Basic Webpack Config
  • Creating a Development Workflow & Script
  • Adding Routing
  • Enabling Lazy Loading
  • Adding Ahead-of-Time Compilation
  • Setting up a Webpack Production Configuration
  • Final Touches & Finishing the Production Workflow
  • AoT Bugfixing


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