Angular 7 Training

CHAPTER 1: INTRODUCTION TO ANGULAR 7

What is Angular 7?

Central Features of the Angular Framework

Why Angular?

Scope and Goal of Angular

Angular 7 vs Angular 5 vs Angular 4 vs Angular 2 vs. AngularJS

Angular 7 Environment Setup

Adding Angular 7 and Dependencies to Your App

Building Blocks of and Angular 7 Application

A Basic Angular 7 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 7

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 7

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 7

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