Introduction to Angular 5 [What, Why]

Angular 4 vs Angular 5 []

Upgrade Angular 4 to Angular 5 []

Prerequisites and Setup Environments

Offline and Online Editors

First Angular 5 Application



Data Bindings [Interpolation, Property Binding, Class Binding, Style Binding, Event Binding]

Two Way Binding




Predefined Directives

Custom Directives [ngIf, ngFor, ngSwitch]

Component Data Sharing [Parallal, Parent to Child, Child to Parent]


Dependency Injection


HTTP and Observable

Web API with HTTP and Subscribe





 Chapter 1 : Introduction To Angular 2

Ø What is Angular 2?

Ø Central Features of the Angular Framework

Ø Why Angular?

Ø Scope and Goal of Angular

Ø Angular 2 vs. AngularJS

Ø Installing and Using Angular 2

Ø Adding Angular 2 and Dependencies to Your App

Ø Building Blocks of and Angular 2 Application

Ø A Basic Angular 2 Application

Chapter 2: Introduction To Typescript And Es6

Ø Programming Languages for Use with Angular

Ø TypeScript Syntax

Ø The Type System – Defining Variables

Ø The Type System – Defining Arrays

Ø The Type System – Classes & Objects

Ø Class Constructors

Ø Class Constructors – Alternate Form

Ø Interfaces

Ø Parameter and Return Value Types

Ø Working with Modules

Ø TypeScript Transpilation

Ø Arrow Functions

Ø Template Strings

Ø Template Strings – Variables and Expressions

Ø Template Strings – Multiline

Ø Generics – Class

Ø Generics – Methods

Ø Generics – Restricting Types

Chapter 3: Components In Angular 2

Ø What is a Component?

Ø An Example Component

Ø Component Starter

Ø Developing a Simple Login Component

Ø Login Component: Add HTML

Ø The HTML Component Template

Ø Login Component

Ø Component Decorator Properties

Ø Component Lifecycle Hooks

Ø Using a Lifecycle Hook: OnInit

Chapter 4 : Data And Event Binding

Ø Binding Syntax

Ø One-Way Output Binding

Ø Binding Displayed Output Values

Ø Two-Way Binding of Input Fields

Ø Input Binding Examples

Ø Binding Events

Ø Binding Events Examples

Ø Setting Element Properties

Ø Setting Properties: Examples

Chapter 5 : Attribute Directives And Property Bindings

Ø What are Directives

Ø Directive Types

Ø Apply Styles by Changing Classes

Ø Changing Classes – Example

Ø Applying Styles Directly

Ø Applying Styles Directly – Example

Ø Obsolete Directives and Property Binding

Ø Controlling Element Visibility

Ø Setting Image Source Dynamically

Ø Setting Hyperlink Source Dynamically

Chapter 6 : Structural Directives

Ø Structural Directives

Ø Adding and Removing Elements Dynamically

Ø Looping Using ngFor

Ø ngFor – Basic Syntax

Ø ngFor – Full Template Syntax

Ø Creating Tables with ngFor

Ø ngFor Local Variables

Ø ngFor Changes in the backing data source

Ø Swapping Elements with ngSwitch

Ø ngSwitch – Basic Syntax

Ø ngSwitch – Full Template Syntax

Chapter 7 : Template Driven Forms

Ø Template Driven Forms

Ø Note on Deprecated Forms APIs

Ø A Basic Angular Form

Ø Binding Input Fields

Ø Accessing the Form Object

Ø Binding the Form Submit Event

Ø The Submit Function

Ø Basic HTML5 Validation – “required” Attribute

Ø HTML5 vs. Angular Validation

Ø Angular Validation

Ø Displaying Form Validation State

Ø Displaying Field Validation State

Ø Displaying Validation State Using Classes

Ø Disabling Submit when Form is Invalid

Ø Submitting the Form

Ø Binding to Object Variables

Ø Additional Input Types

Ø Checkboxes

Ø Select(drop down) Fields

Ø Rendering Options for Select (drop down)

Ø Date fields

Ø Radio Buttons

Chapter 8: Service And Dependency Injection

Ø What is a Service?

Ø Creating a Basic Service

Ø What is Dependency Injection?

Ø What Dependency Injection Looks Like

Ø Injecting Services

Ø Using a Service in a Component: Dedicated Instance

Ø Using onInit to Initialize Component Data

Ø Using a Shared Service Instance

Ø Dependency Injection

Chapter 9: HTTP CLIENT

Ø The Angular HTTP Client

Ø Using The HTTP Client – Overview

Ø Setting up the Root Component

Ø Service Using Http Client

Ø Importing Individual HTTP Providers into Services

Ø Service Imports

Ø The Observable object type

Ø What does an Observable Object do?

Ø Making a Basic HTTP GET Call

Ø Using the Service in a Component

Ø The Component

Ø Component Code Review

Ø Importing Observable Methods

Ø Enhancing the Service with .map() and .catch()

Ø Using .map()

Ø Using .catch()

Ø Using toPromise()

Ø GET Request

Ø GET Request with Options

Ø POST Request

Ø Reading HTTP Response Headers

Chapter 10 : Pipes And Data Formatting

Ø What are Pipes?

Ø More on Pipes

Ø Formatting Changes in Angular 2

Ø Using a Built-in Pipe

Ø Built-In Pipes

Ø Using Pipes in HTML

Ø Chaining Pipes

Ø Using Pipes in JavaScript

Ø Some Pipe Examples

Ø Decimal Pipe

Ø CurrencyPipe

Ø Custom Pipes

Ø Custom Pipe Example

Ø Using Custom Pipes

Ø A Filter Pipe

Ø A Sort Pipe

Ø Pipe Category: Pure and Impure

Ø Pure Pipe Example

Ø Impure Pipe Example

Chapter 11 : Introduction To Single Page Application

Ø What is a Single Page Application (SPA)

Ø SPA Workflow

Ø Traditional Web Application Capabilities

Ø Single Page Application Advantages

Ø SPA and Traditional Web Sites

Ø SPA Challanges

Ø Implementing SPA’s Using Angular 2

Ø Simple SPA Using Visibility Control

Ø SPA Using Angular Components

Ø SPA with Angular Components – Switching

Ø SPA with Angular Components – The Displayed Component

Ø Implement SPA Using an Angular Component Router

Chapter 12 : The Angular Component Router

Ø Routing and Navigation

Ø The Component Router

Ø Traditional Browser Navigation

Ø Component Router Terminology

Ø Setting up the Component Router

Ø Local URL Links

Ø Browser pushState

Ø Routes

Ø The app.routes.ts File

Ø The app.routes.ts File – Example

Ø Bootstrapping Routing in Main.ts

Ø A Basic App With Routing

Ø App Routes

Ø AppComponent – Code

Ø AppComponent – Router Related Features

Ø AppComponent – precompile array

Ø AppComponent – routerLinks

Ø Programmatic Navigation

Ø Basic Navigation

Ø Passing Data During Navigation

Ø Creating Routes with Route Parameters

Ø Navigating with Route Parameters

Ø Using Route Parameter Values

Ø Retrieving the Route Parameter Synchronously

Ø Retrieving a Route Parameter Asynchronously

Ø Query Parameters

Ø Query Parameters – Example Component

Ø Query Parameters – queryParams

Ø Query Parameters – Navigation

Ø Retrieving Query Parameters Asynchronously

Ø Problems with Manual URL entry and Bookmarking

Ø Fixing Manual URL entry and Bookmarking