Introduction to Angular 4

Code: ANG-JS-171

3 days

List Tuition : $1,595.00 USD

Course Overview

    Download PDF 

Introduction to Angular 4 training teaches developers how to use the newest version of Angular to facilitate development of rich application experiences that are responsive and functional across a full range of platforms, from desktop to phone.

Most courses are delivered as private, customized, on-site training at our clients' locations worldwide for groups of 3 or more attendees and are custom tailored to their specific needs. These courses can also be delivered as live, private online classes for groups that are geographically dispersed or wish to save on the instructor's or students' travel expenses. To receive a customized proposal and price quote for private training at your site or online, please contact us.

View our Angular page for details on All Angular Trainings

Developers looking to learn how to use the newest version of Angular to facilitate development of rich application experiences that are responsive and functional across a full range of platforms, from desktop to phone.

All students will learn to:

  • Understand how Angular is different than traditional web development frameworks
  • Code using new ES6 and TypeScript language features
  • Develop an application from scratch using Angular 4
  • Explore Angular coding and architecture best practices
  • Understand and use Angular Forms, Observables, Dependency Injection, and Routing
  • Retrieve, update, and delete data using Angular’s Http service


Why Angular 4?

  • User Experience similar to a Desktop Application
  • Productivity and Tooling
  • Performance
  • Community
  • Full-featured Framework
  • Platform for Targeting Native Mobile not just Web Browsers

Understanding Angular Versions

  • AngularJS (Angular 1.x)
  • Angular

Understanding Angular 4

  • Drop-in replacement for Angular 2

Angular 4 Features

  • View Engine generates smaller code
  • Enhanced *ngIf syntax
  • Animation code now in own packages
  • TypeScript 2.1
  • Improved compiler speed
  • Angular Universal
  • Flat ESModules

TypeScript and ECMAScript 6 (ES6) Fundamentals

  • Classes
  • ES Modules
  • Arrow Functions
  • Template Literals
  • Scoping using Let and Const Keywords
  • Spread Syntax and Rest Parameters
  • Destructuring
  • Decorators (JavaScript Aspect-Oriented Programming)

Angular 4 Basics

  • Components


  • Modules
  • Models
  • Template Syntax
  • HTML in templates
  • Interpolation
  • Binding syntax
  • Property binding
  • Event binding
  • Two-way data binding
  • Attribute, class, and style bindings
  • Built-in Directives
  • Template Input Variables
  • The NgSwitch Directives
  • Template Reference Variables
  • Input and output properties
  • Template Expression Operators
  • Pipe ( | )
  • Safe Navigation Operator ( ?. )


  • Implementing the Component Lifecycle Hook OnInit
  • Component Communication


  • Using a services to access data
  • Using a service to encapsulate business logic
  • Using a service to configure your application
  • Using a service for logging

Dependency Injection

  • Understanding Dependency Injection
  • Angular’s Dependency Injection System
  • Registering
  • Injecting
  • Hierarchical Injection

Template-driven Forms

  • NgSubmit Directive
  • FormsModule
  • NgForm, NgModel, and NgModelGroup Directives

Validation Directives

  • Displaying validation messages
  • Styling validation messages

Communicating with the Server using the Http Service

  • Deciding between Promises or Observables (RxJS)
  • Making Http GET Requests
  • Making Http POST and PUT Requests
  • Issuing a Http DELETE Request
  • WebSockets


  • Importing the RouterModule and Routes
  • Configuring Routes
  • Displaying Components using a RouterOutlet
  • Navigating with RouterLink and RouterLinkActive Directives or the Router
  • Accessing parameters using ActivedRoute
  • Organizing your code into Modules


All attendees must have substantial prior experience developing with JavaScript. If attendees will not have prior JavaScript experience, we would be delighted to precede this class with a one- or two-day intensive JavaScript primer.

Bring Training to You

Request schedule for this course

Request a Quote for this Class

We provide government and government contractor discounts, please request a quote


total option: 0

Hotel and Travel can be included on your quote.
For immediate response, you can call 1-855-515-2170 or we will provide a quote within 4 business hours. Travel must be booked 14 days before training for rate to apply.

Learn How to Become a Managed Learning Member

Request a Quote

Thank you for requesting a quote, we will be in touch shortly with a quote. If you need immediate assistance, please call 855-515-2170.

Request Other Date

Request date or location you need

Don’t see the date or location you need? Contact us and let us know, we are adding dates and locations daily.

Request a Quote for this Class