Maxtrain.com - [email protected] - 513-322-8888 - 866-595-6863


Angular and TypeScript Development

Alert Me


The Angular and Typescript Development class teaches how to develop world-class, single page applications (SPA) on the web. Angular is one of the few comprehensive JavaScript frameworks in the industry today meaning developers can develop every component of every application using Angular.

The class begins with an explanation of what Angular is and why it has become so popular with so many developers. We then explore the language of Angular: Typescript. Google recommends developers use Typescript to create their applications, but Google developers use Typescript to create Angular itself. Google must believe in the value of using Typescript. We’ll teach all the valuable enhancements Typescript offers over pure JavaScript.

Next we’ll explore Angular’s architecture and how web applications are created with Angular. The component architecture allows components to be easily shared across applications with little or no changes. We’ll use the Angular/CLI (command line interface) to generate the core objects of Angular and combine them into an application. Next, we move to Services that can be shared among components and can be used to interact with server-based JSON service controllers. We’ll enhance the application making it SPA (single page application) while we detail the routing that navigates between the applications feature components. We’ll conclude by explaining Pipes that can filter and sort collections of data, Guards that allow access to links only when a user meets the appropriate criteria, and how to leverage the Life Cycle Hooks to enhance the interactivity of our application.

Throughout the class, we’ll be building up an Angular application that will interact with data provided by a JSON server asynchronously to provide:

  • Listings of the data
  • Details of any individual data row
  • Creating new instances of data
  • Editing data



Module 1 - Overview of Angular

  1. Prerequisites
  2. Angular vs AngularJS
  3. Angular Framework
  4. Structure of an Angular application

Module 2 - Typescript

  1. Overview of Typescript
  2. Installing Typescript
  3. Configuring Typescript
  4. Features
  1. Types
  2. Let
  3. const
  4. interface
  5. class
  6. function parameters
  7. this
  8. generics
  9. modules
  10. importing/exporting

Module 3 - Angular

  1. Overview
  2. Single-page application

Module 4 - Angular/CLI

  1. Installing Angular/CLI
  2. creating a new project
  3. generate an Angular object

Module 5 - Structure of Angular files

  1. importing
  2. decorators
  3. classes

Module 6 - Modules

  1. Overview
  2. @NgModule

Module 7 - Components

  1. Overview
  2. @Component
  3. selectors
  4. template/templateUrl
  5. styles/styleUrls
  6. class
  7. data binding
  8. *ngIf
  9. *ngFor
  10. ngSwitch
  11. ngClass
  12. Expression context
  13. events
  14. component communications
  15. Bootstrap
  16. Life Cycle Hooks

Module 8 - Services

  1. Overview
  2. Creating a service
  3. Using a service
  4. HttpClient
  5. Observables
  6. Subscribing to observable
  7. Asynchronous communication

Module 9 - Routing

  1. Overview
  2. <router-outlet>
  3. routerLink
  4. routerLinkActive
  5. route
  6. route path at startup and catch-all
  7. child routes

Module 10 - Pipes

  1. Overview
  2. Example: sortPipe

Module 11 - Guards

  1. Overview
  2. How to use a guard

Module 12 - Life Cycle Hooks

  1. Overview
  2. ngOnChanges()
  3. ngOnInit()
  4. ngDoCheck()
  5. ngAfterContentInit()
  6. ngAfterContentChecked()
  7. ngAfterViewInit()
  8. ngAfterViewChecked()
  9. ngOnDestroy()

Module 13 - Miscellaneous

  1. Symbolic links to files
  2. Feature modules



  • HTML
  • CSS
  • JavaScript
  • JSON
  • AJAX



This course is designed for JavaScript developers looking to build Single Page Applications using the latest version of the Angular framework and the TypeScript language.


4 Days Course

Class Dates

Request a Date or a Private Class below.

Loading ...