Consulting Training Blog Careers About Us Contact Us
All Classes Will Be Held Virtually – Live Online Intertech's Training Division has been successfully instructing professionals through virtual live online training since the advent of the smartboard. It is a proven form and offers the convenience of live questions, group interaction, and labs with an instructor looking over your shoulder. Because of this, we will continue all classes live but virtually, including Agile and Scrum instruction, so businesses and individual’s seeking professional development can keep moving forward during these unexpected times.

Angular 2 Training

Course ID: WAS-2533
Duration: 3 Days

Upcoming Classes

Click the Get Notified button for priority notification when a class is next scheduled.

Get Notified

On Site/Private

Can't find a class that fits right for you? Contact us to inquire about scheduling your own private class

Contact Us

Description

Angular 2 is a complete rewrite of the Angular framework, incorporating the latest standards in JavaScript and unifying many of the diverse elements found in AngularJS 1.x. The new Angular 2 training course includes a comprehensive introduction to AngularJS version 2.0, introduction to TypeScript and ES6, Components, Form Handling, Data Binding and much more. See full details below.

Our Angular 2 training is offered as Instructor led in classroom, live online, and onsite. 

Bring This Course To You

For groups of 5 or more, let Intertech bring this course to your location. Customized versions tailored towards your objectives are also available.

Learn More

Course Outline

Introduction to Angular 2

  • What is Angular 2?
  • Why Angular 2?
  • Scope and Goal of Angular 2
  • Installing and using Angular 2
  • Building Blocks of an Angular 2  Application
  • A simple application

Introduction to TypeScript and ES6

  • Introduction to TypeScript
  • The type system
  • Defining class and interface
  • Defining a module
  • Importing a module
  • Generics

Components

  • What is a component?
  • Developing a simple component.
  • Templates for a component.
  • Component lifecycle

Data Binding

  • What is data binding
  • One way data binding
  • Two way data binding
  • Event binding

Working with Forms

  • Using Input Text Box
  • Using Radio Buttons
  • Using Checkbox
  • Using Checkbox - Advanced
  • Using Select
  • Using Select – Advanced
  • Disabling an Input
  • Detecting model changes using getter and setter

Basic Directives

  • What are directives?
  • Controlling Element Visibility
  • Adding and Removing an Element
  • Dynamically Changing Style Class
  • Setting Image Source
  • Setting Hyperlink Dynamically

Advanced Directives

  • Looping using ngFor
  • Conditional rendering using ngSwitch
  • ngSwitchWhen

Service and Dependency Injection

  • What is a service?
  • Defining a service
  • Injecting a service to a component
  • Application wide dependency injection
  • @Injectable classes
  • Multiple service instances
  • @Optional and @Host

HTTP Client

  • The HTTP providers
  • Injecting the providers
  • Making a GET call
  • Handling error
  • More about Observables
  • Making a POST request
  • Working with headers
  • Making sequential calls
  • Making parallel calls

Introduction to Custom Directives

  • Types of directives - component, structural and attribute
  • Creating a basic attribute directive
  • Using the attribute directive
  • Handling event from an attribute directive
  • Binding input to an attribute directive

Advanced Custom Directives

  • About structural directives
  • Understand how ngIf works
  • Using the <template> tag
  • Using asterisk
  • Creating your own structural directive
  • Using the structural directive
  • Binding input to a structural directive

Advanced Form Handling

  • Introduction to Form Validation
  • Validation and Model Binding
  • Input Type Validation
  • Validation Directives
  • A Note About "required"
  • Detecting Validation State
  • Showing Error Message
  • Other Status Variables
  • Styling Input Fields
  • Styling Other Areas

Pipe

  • What is a pipe?
  • Example pipe usage.
  • Passing parameters to a pipe
  • Chaining pipes
  • DatePipe
  • NumberPipe
  • CurrencyPipe
  • UpperCasePipe and LowerCasePipe
  • DecimalPipe
  • Developing a custom pipe
  • Change detection from a pipe
  • Pure and Impure Pipes

Introduction to Single Page Application

  • What is a Single Page Application (SPA)?
  • How is it Any Different?
  • Why Create SPA?
  • It's Not All or Nothing
  • Challenges to SPA
  • Implementing SPA Using Angular 2
  • Simple SPA Using Visibility Control
  • SPA using Dynamic Templates for a Component
  • Example of Dynamic Template
  • SPA Using Routing

Routing

  • Why use routing?
  • Defining a route table
  • Navigation using hyperlink
  • Navigation using code
  • Supplying parameters to a route URL

Free Resources from Intertech

Free On-Demand Video Bundle: IoT, Agile/Scrum, and Leadership

Free Whitepaper: Design and Code Review Checklist

Free eBook: Top Freeware Picks for Developers

X