Angular 4

Anatomy of an Angular 4 Application

Get the Most from This Course

Angular vs Angular 2 vs Angular 4 

Sample Application

Course Outline

Selecting a Language

Selecting an Editor

Setting up Our Environment

Setting up an Angular 4 Application

Running an Angular 4 Application

About Modules

Loading ES Modules and Hosting Our Application

Introduction to Components

Introduction

What Is a Component?

Creating the Component Class

Defining the Metadata with a Decorator

Importing What We Need

Demo: Creating the App Component

Bootstrapping Our App Component

Demo: Bootstrapping Our App Component

Templates, Interpolation, and Directives

Building a Template

Building the Component

Using a Component as a Directive

Binding with Interpolation

Adding Logic with Directives: ngIf

Adding Logic with Directives: ngFor

Data Binding & Pipes

Property Binding

Handling Events with Event Binding

Handling Input with Two-way Binding

Transforming Data with Pipes

More on Components

Defining Interfaces

Encapsulating Component Styles

Using Lifecycle Hooks

Building Custom Pipes

Relative Paths with Module Id

Building Nested Components

Building a Nested Component

Using a Nested Component

Passing Data to a Nested Component Using @Input

Passing Data from a Component Using @Output

Services and Dependency Injection

How Does It Work?

Building a Service

Registering the Service

Injecting the Service

Retrieving Data Using HTTP

Observables and Reactive Extensions

Sending an HTTP Request

Exception Handling

Subscribing to an Observable

Navigation and Routing Basics

How Routing Works

Configuring Routes

Tying Routes to Actions

Placing the Views

Navigation and Routing Additional Techniques

Passing Parameters to a Route

Activating a Route with Code

Protecting Routes with Guards

Angular Modules

What Is an Angular Module?

Bootstrap Array

Declarations Array

Exports Array

Imports Array

Providers Array

Feature Modules

Shared Module

Revisiting AppModule

Form Basic in Angular 4

Reviewing the angular-seed Project

A Simple Form and ngForm

Shutting Off Browser Form Validation

Styling Forms and Text Input Using Bootstrap

Checkboxes

Radio Buttons

Select and Options

Browser Inconsistencies for Input Types

Data Binding in Angular Forms

Data Binding and ngModel

Creating a Model Object

Binding to Your Model

Calling a Method in Place of Binding

Calling a Method in Place of Binding

Binding a Checkbox

Binding Radio Buttons

Binding a Select Control

Form Validation

CSS Classes for Validation

CSS Validation Classes in Action

ngModel Validation Properties

Showing Error Messages

Styling Controls for Errors

HTML 5 Attributes for Validation

Validating a Select Control

More on Select Control Validation

Form Level Validation

Disabling the Submit Button

HTTP Form Posting and Data Access

Creating a Test Node Server

Creating an Angular Service to Post a Form

Handling a Form's Submit Event

Validating the Form Before a Post

Setting up an Observable and a Subscriber

Posting to the Server

Handling a Server Error

Retrieving an ID From the Server

Loading Data from a Server

Dynamic Options for a Select Control

Third-party Form Controls

Setting up ng4-bootstrap

Datepicker

Timepicker

A Toggle Switch

Horizontal Radio Buttons

Angular 4 Setup Revisited

TypeScript Configuration File (tsconfig.json) & TypeScript Definitions File (typings.json)

npm Package File (package.json)

SystemJS Configuration File (systemjs.config.js)

index.html File Scripts

Bootstrapping Revisited

Angular CLI

Recapping Our Journey