· Overview

· Environment Setup

· Basic Syntax

· Types, Variables and Operators

· Decision Making and Loops

· Functions and Lambda Expressions

· Generics

· Enums

· Number and Strings

· Arrays

· Tuples

· Union

· Interface, Classes and Objects

· Namespaces

· Modules

· Ambients

· Decorators

· Mixins

· Why Angular 5

· Angular 5 Features

· Installing and Using Angular 5

· Creating the first Angular Project

· Architecture Overview

· What is new in Angular 5

· Summary

· Introducing the component

· Component Decorator Properties

· Template

· Inline Template

· Interpolation – Plain text, Object and Array

· Adding CSS

· Component Starter

· Integrating Bootstrap

· Developing a Header Component

· Developing a Footer Component

· Developing a Product Component

· Summary

· Binding Syntax

· One-Way Output Binding

· Property binding

· Attribute binding

· Binding Events

· Binding Events Examples

· Setting Element Properties

· Setting Properties: Examples

· Two-Way Binding of Input Fields

· Input Binding Examples

· Summary

· 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

· Summary

· 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

· Summary

· 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 Validators

· Angular Validation State

· 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

· Summary

· 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 a Service in a Component: Dedicated Instance - Example Code

· Using onInit to Initialize Component Data

· Using a Shared Service Instance

· Dependency Injection and @Host

· Dependency Injection and @Optional

· Summary

· What is an Observable?

· Observable Operators

· Creating Observables Using Static Operators

· What is an Observer?

· Observer Example

· Subject

· Subject Example

· EventEmitter or Observable

· The Angular HTTP Client

· Using The HTTP Client - Overview

· Setting up HTTP_PROVIDERS in the Root Component

· Importing Individual Providers into Services

· Service Using Http Client

· 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 PeopleService Client Component

· Client 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

· POST Request Example

· Reading HTTP Response Headers

· Summary

· What are Pipes?

· More on Pipes

· Using a Built-in Pipe

· Built-In Pipes

· Using Pipes in HTML

· Chaining Pipes

· Using Pipes in JavaScript

· Some Pipe Examples

· Decimal Pipe

· Currency Pipe

· Custom Pipes

· Using Custom Pipes

· A Filter Pipe

· A Sort Pipe

· Pipe Category: Pure and Impure

· Pure Pipe Example

· Impure Pipe Example

· Summary

· What is a Single Page Application (SPA)

· SPA Workflow

· Traditional Web Application Capabilities

· Single Page Application Advantages

· SPA and Traditional Web Sites

· SPA Challenges

· Implementing SPA's Using Angular 4

· 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

Summary

· Routing and Navigation

· The Component Router

· Traditional Browser Navigation

· Component Router Terminology

· Setting up the Component Router

· Local URL Links

· Browser pushState and

· Routes

· The app.routes.ts File

· Bootstrapping Routing in Main.ts

· A Basic App With Routing

· App Routes

· App Component

· 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 and Asynchronously

· Query Parameters

· Query Parameters - queryParams

· Query Parameters - Navigation

· Retrieving Query Parameters Asynchronously

· Problems with Manual URL entry and Bookmarking

· Fixing Manual URL entry and Bookmarking

· Summary

· Introduction

· Bower Package Manager

· Managing Packages Using Bower

· Using Bower Packages

· Grunt Build Manager

· Installing Grunt Components

· Writing a Grunt Build Script

· Running Grunt

· Running JSHint Task

· Compiling Less Files

· Compressing CSS Files

· Gulp Build Manager

· Gulp vs. Grunt

· Installing Gulp Components

· Writing a Build Script

· Running Gulp

· Compiling Less Files

· Summary