Consulting Training Blog Careers About Us Contact Us

Angular 2 Training

Course ID: WAS-2533
Duration: 3 Days

Upcoming Classes

Sorry, nothing scheduled right now. Click the Get Notified button below to be alerted when a class is 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 Whitepaper: 20 Tips for Selecting a Consulting Firm

X