Section 1 : Getting Started

Course Introduction
What is Angular?
Angular vs Angular 2 vs Angular 8
CLI Deep Dive & Troubleshooting
Project Setup and First App
Editing the First App
The Course Structure
How to get the Most out of the Course
What is TypeScript?
A Basic Project Setup using Bootstrap for Styling

Section 2 : The Basics

Module Introduction
How an Angular App gets Loaded and Started
Components are Important!
Creating a New Component
Understanding the Role of AppModule and Component Declaration
Using Custom Components
Creating Components with the CLI & Nesting Components
Working with Component Templates
Working with Component Styles
Fully Understanding the Component Selector
What is Databinding?
String Interpolation
Property Binding
Property Binding vs String Interpolation
Event Binding
Bindable Properties and Events
Passing and Using Data with Event Binding
Important: FormsModule is Required for Two-Way-Binding!
Two-Way-Databinding
Combining all Forms of Databinding
Understanding Directives
Using ngIf to Output Data Conditionally
Enhancing ngIf with an Else Condition
Styling Elements Dynamically with ngStyle
Applying CSS Classes Dynamically with ngClass
Outputting Lists with ngFor
[OPTIONAL] Assignment Solution
Getting the Index when using ngFor

Section 3 : Course Project - The Basics

Project Introduction
Planning the App
Installing Bootstrap Correctly
Setting up the Application
Creating the Components
Using the Components
Adding a Navigation Bar
Alternative Non-Collapsable Navigation Bar
Creating a Recipe Model
Adding Content to the Recipes Components
Outputting a List of Recipes with ngFor
Displaying Recipe Details
Working on the ShoppingListComponent
Creating an Ingredient Model
Creating and Outputting the Shopping List
Adding a Shopping List Edit Section
Wrap Up & Next Steps

Section 4 : Debugging

Understanding Angular Error Messages
Debugging Code in the Browser Using Sourcemaps
Using Augury to Dive into Angular Apps

Section 5 : Components & Databinding Deep Dive

Module Introduction
Splitting Apps into Components
Property & Event Binding Overview
Binding to Custom Properties
Assigning an Alias to Custom Properties
Binding to Custom Events
Assigning an Alias to Custom Events
Custom Property and Event Binding Summary
Understanding View Encapsulation
More on View Encapsulation
Using Local References in Templates
@ViewChild() in Angular 8
Getting Access to the Template & DOM with @ViewChild
Projecting Content into Components with ng-content
Understanding the Component Lifecycle
Seeing Lifecycle Hooks in Action
Lifecycle Hooks and Template Access
@ContentChild() in Angular 8
Getting Access to ng-content with @ContentChild
Wrap Up

Section 6 : Course Project - Components & Databinding

Introduction
Adding Navigation with Event Binding and ngIf
Passing Recipe Data with Property Binding
Passing Data with Event and Property Binding (Combined)
Allowing the User to Add Ingredients to the Shopping List

Section 7 : Directives Deep Dive

Module Introduction
ngFor and ngIf Recap
ngClass and ngStyle Recap
Creating a Basic Attribute Directive
Using the Renderer to build a Better Attribute Directive
More about the Renderer
Using HostListener to Listen to Host Events
Using HostBinding to Bind to Host Properties
Binding to Directive Properties
What Happens behind the Scenes on Structural Directives
Building a Structural Directive
Understanding ngSwitch

Section 8 : Course Project - Directives

Building and Using a Dropdown Directive
Closing the Dropdown From Anywhere

Section 9 : Using Services & Dependency Injection

Module Introduction
Why would you Need Services?
Creating a Logging Service
Injecting the Logging Service into Components
Creating a Data Service
Understanding the Hierarchical Injector
How many Instances of Service Should It Be?
Injecting Services into Services
Using Services for Cross-Component Communication
Services in Angular 6+

Section 10 : Course Project - Services & Dependency Injection

Introduction
Setting up the Services
Managing Recipes in a Recipe Service
Using a Service for Cross-Component Communication
Adding the Shopping List Service
Using Services for Push Notifications
Adding Ingredients to Recipes
Passing Ingredients from Recipes to the Shopping List (via a Service)

Section 11 : Changing Pages with Routing

Module Introduction
Why do we need a Router?
Setting up and Loading Routes
Navigating with Router Links
Understanding Navigation Paths
Styling Active Router Links
Navigating Programmatically
Using Relative Paths in Programmatic Navigation
Passing Parameters to Routes
Fetching Route Parameters
Fetching Route Parameters Reactively
An Important Note about Route Observables
Passing Query Parameters and Fragments
Retrieving Query Parameters and Fragments
Practicing and some Common Gotchas
Setting up Child (Nested) Routes
Using Query Parameters - Practice
Configuring the Handling of Query Parameters
Redirecting and Wildcard Routes
Important: Redirection Path Matching
Outsourcing the Route Configuration
An Introduction to Guards
Protecting Routes with canActivate
Protecting Child (Nested) Routes with canActivateChild
Using a Fake Auth Service
Controlling Navigation with canDeactivate
Passing Static Data to a Route
Resolving Dynamic Data with the resolve Guard
Understanding Location Strategies
Wrap Up

Section 12 : Course Project - Routing

Planning the General Structure
Setting Up Routes
Adding Navigation to the App
Marking Active Routes
Fixing Page Reload Issues
Child Routes: Challenge
Adding Child Routing Together
Configuring Route Parameters
Passing Dynamic Parameters to Links
Styling Active Recipe Items
Adding Editing Routes
Retrieving Route Parameters
Programmatic Navigation to the Edit Page
One Note about Route Observables
Project Cleanup

Section 13 : Understanding Observables

Module Introduction
Analyzing Angular Observables
Getting Closer to the Core of Observables
Building a Custom Observable
Errors & Completion
Observables & You!
Understanding Operators
Subjects
Wrap Up
Useful Resources & Links
RxJS 6 without rxjs-compat
Wrap Up

Section 14 : Course Project - Observables

Improving the Reactive Service with Observables (Subjects)

Section 15 : Handling Forms in Angular Apps

Module Introduction
Why do we Need Angular's Help?
Template-Driven (TD) vs Reactive Approach
An Example Form
TD: Creating the Form and Registering the Controls
TD: Submitting and Using the Form
TD: Understanding Form State
TD: Accessing the Form with @ViewChild
TD: Adding Validation to check User Input
Built-in Validators & Using HTML5 Validation
TD: Using the Form State
TD: Outputting Validation Error Messages
TD: Set Default Values with ngModel Property Binding
TD: Using ngModel with Two-Way-Binding
TD: Grouping Form Controls
TD: Handling Radio Buttons
TD: Setting and Patching Form Values
TD: Using Form Data
TD: Resetting Forms
Introduction to the Reactive Approach
Reactive: Setup
Reactive: Creating a Form in Code
Reactive: Syncing HTML and Form
Reactive: Submitting the Form
Reactive: Adding Validation
Reactive: Getting Access to Controls
Reactive: Grouping Controls
Fixing a Bug
Reactive: Arrays of Form Controls (FormArray)
Reactive: Creating Custom Validators
Reactive: Using Error Codes
Reactive: Creating a Custom Async Validator
Reactive: Reacting to Status or Value Changes
Reactive: Setting and Patching Values

Section 16 : Course Project - Forms

Introduction
TD: Adding the Shopping List Form
Adding Validation to the Form
Allowing the Selection of Items in the List
Loading the Shopping List Items into the Form
Updating existing Items
Resetting the Form
Allowing the the User to Clear (Cancel) the Form
Allowing the Deletion of Shopping List Items
Creating the Template for the (Reactive) Recipe Edit Form
Creating the Form For Editing Recipes
Syncing HTML with the Form
Adding Ingredient Controls to a Form Array
Fixing a Bug
Adding new Ingredient Controls
Validating User Input
Submitting the Recipe Edit Form
Adding a Delete and Clear (Cancel) Functionality
Redirecting the User (after Deleting a Recipe)
Adding an Image Preview
Providing the Recipe Service Correctly
Deleting Ingredients and Some Finishing Touches
Deleting all Items in a FormArray

Section 17 : Using Pipes to Transform Output

Introduction & Why Pipes are Useful
Using Pipes
Parametrizing Pipes
Where to learn more about Pipes
Chaining Multiple Pipes
Creating a Custom Pipe
Parametrizing a Custom Pipe
Example: Creating a Filter Pipe
Pure and Impure Pipes (or: How to fix the Filter Pipe)
Understanding the async Pipe

Section 18 : Making Http Requests

A New IDE
Module Introduction
How Does Angular Interact With Backends?
The Anatomy of a Http Request
Backend (Firebase) Setup
Sending a POST Request
GETting Data
Using RxJS Operators to Transform Response Data
Using Types with the HttpClient
Outputting Posts
Showing a Loading Indicator
Using a Service for Http Requests
Services & Components Working Together
Sending a DELETE Request
Handling Errors
Using Subjects for Error Handling
Using the catchError Operator
Error Handling & UX
Setting Headers
Adding Query Params
Observing Different Types of Responses
Changing the Response Body Type
Introducing Interceptors
Manipulating Request Objects
Response Interceptors
Multiple Interceptors
Wrap Up
Useful Resources & Links

Section 19 : Course Project - Http

Module Introduction
Backend (Firebase) Setup
Setting Up the DataStorage Service
Storing Recipes
Fetching Recipes
Transforming Response Data
Resolving Data Before Loading
Fixing a Bug with the Resolver

Section 20 : Authentication & Route Protection in Angular Apps

Module Introduction
How Authentication Works
Adding the Auth Page
Switching Between Auth Modes
Handling Form Input
Preparing the Backend
Preparing the Signup Request
Sending the Signup Request
Adding a Loading Spinner & Error Handling Logic
Improving Error Handling
Login Error Handling
Sending Login Requests
Creating & Storing the User Data
Reflecting the Auth State in the UI
Adding the Token to Outgoing Requests
Attaching the Token with an Interceptor
Adding Logout
Adding Auto-Login
Adding Auto-Logout
Adding an Auth Guard
Wrap Up

Section 21 : Dynamic Components

Module Introduction
Adding an Alert Modal Component
Understanding the Different Approaches
Using ngIf
Preparing Programmatic Creation
Creating a Component Programmatically
Understanding entryComponents
Data Binding & Event Binding
Wrap Up

Section 22 : Using Angular Modules & Optimizing Apps

Module Introduction
What are Modules?
Analyzing the AppModule
Getting Started with Feature Modules
Splitting Modules Correctly
Adding Routes to Feature Modules
Component Declarations
The ShoppingList Feature Module
Understanding Shared Modules
Understanding the Core Module
Adding an Auth Feature Module
Understanding Lazy Loading
Implementing Lazy Loading
More Lazy Loading
Preloading Lazy-Loaded Code
Modules & Services
Loading Services Differently
Ahead-of-Time Compilation
Wrap Up
How to use AoT Compilation with the CLI
Preloading Lazy Loaded Routes
Wrap Up

Section 23 : Deploying an Angular App

Module Introduction
Deployment Preparation & Steps
Using Environment Variables
Deployment Example: Firebase Hosting

Section 24 : Bonus: The HttpClient

Module Introduction
The Documentation
Unlocking
Request Configuration and Response
Requesting Events
Settings Headers
Http Parameters
Progress
Interceptors
Modifying Requests in Interceptors
Multiple Interceptors
Wrap Up

Section 25 : Bonus Working with NgRx in our Project

Module Introduction
What is Application State?
What is NgRx?
Getting Started with Reducers
Adding Logic to the Reducer
Understanding & Adding Actions
Setting Up the NgRx Store
Selecting State
Dispatching Actions
Multiple Actions
Preparing Update & Delete Actions
Updating & Deleting Ingredients
Expanding the State
Managing More State via NgRx
Removing Redundant Component State Management
First Summary & Clean Up
One Root State
Setting Up Auth Reducer & Actions
Dispatching Auth Actions
Auth Finished (For Now...)
And Important Note on Actions
Exploring NgRx Effects
Defining the First Effect
Effects & Error Handling
Login via NgRx Effects
Managing UI State in NgRx
Finishing the Login Effect
Preparing Other Auth Actions
Adding Signup
Further Auth Effects
Adding Auto-Login with NgRx
Adding Auto-Logout
Finishing the Auth Effects
Using the Store Devtools
The Router Store
Getting Started with NgRx for Recipes
Fetching Recipe Detail Data
Fetching Recipes & Using the Resolver
Fixing the Auth Redirect
Update, Delete and Add Recipes
Storing Recipes via Effects
Cleanup Work
Wrap Up
[LEGACY] Module Introduction
[LEGACY] State Challenges
[LEGACY] Getting Started with Reducers
[LEGACY] Adding Actions
[LEGACY] Finishing the First Reducer
[LEGACY] Registering the Application Store
[LEGACY] Selecting Data from State
[LEGACY] Dispatch Actions
[LEGACY] More Actions and Adding Ingredients
[LEGACY] Dispatching Update and Deleting Shopping List Actions
[LEGACY] Expanding App State
[LEGACY] Editing the Shopping-List via NgRx
[LEGACY] Managing all Relevant State
[LEGACY] Authentication and Side Effects - Introduction
[LEGACY] Setting up the Auth Store Files
[LEGACY] The Reducer
[LEGACY] Adding Reducer Logic & Actions
[LEGACY] Adjusting the App Module Setup
[LEGACY] Using Authentication
[LEGACY] Dispatch Actions
[LEGACY] Getting State Access in Http Interceptor
[LEGACY] Handling the Auth Token
[LEGACY] Only React to Actions Once via take(1)
[LEGACY] A Closer Look at Effects
[LEGACY] Auth Effects and Actions
[LEGACY] Effects - How they Work
[LEGACY] Adding Auth Signup
[LEGACY] Adding Auth Signin
[LEGACY] Navigation as a Side Effect
[LEGACY] Handling Logout via NgRx
[LEGACY] Additional Fixes
[LEGACY] Redirecting Upon Logout
[LEGACY] What's Next?
[LEGACY] The Router Store Package
[LEGACY] Store Devtools
[LEGACY] Lazy Load and Dynamic Injection
[LEGACY] Adding Recipe Actions
[LEGACY] Adding Recipe Reducers
[LEGACY] Dispatching and Selecting State
[LEGACY] Viewing and Deleting Recipes via NgRx
[LEGACY] Editing and Updating Recipes via NgRx
[LEGACY] Recipes Side Effects - Fetching from Server
[LEGACY] Recipes Side Effects - Storing Recipes on Server
[LEGACY] Cleaning Up
[LEGACY] Updating to RxJS 6+
[LEGACY] Wrap Up

Section 26 : Bonus: Angular Universal

Module Introduction
Getting Started with Angular Universal
Working on the App Module
Adding a Server-Side Build Workflow
Adding a NodeJS Server
Pre-Rendering the App on the Server
Next Steps

Section 27 : Angular Animations

Introduction
Setting up the Starting Project
Animations Triggers and State
Switching between States
Transitions
Advanced Transitions
Transition Phases
The void State
Using Keyframes for Animations
Grouping Transitions
Using Animation Callbacks

Section 28 : Adding Offline Capabilities with Service Workers

Module Introduction
Adding Service Workers
Caching Assets for Offline Use
Caching Dynamic Assets & URLs

Section 29 : A Basic Introduction to Unit Testing in Angular Apps

Introduction
Why Unit Tests?
Analyzing the Testing Setup (as created by the CLI)
Running Tests (with the CLI)
Adding a Component and some fitting Tests
Testing Dependencies: Components and Services
Simulating Async Tasks
Using fakeAsync and tick
Isolated vs Non-Isolated Tests

Section 30 : Course Roundup

Course Roundup

Section 31 : Angular as a Platform & Closer Look at the CLI

Module Introduction
A Closer Look at "ng new"
IDE & Project Setup
Understanding the Config Files
Important CLI Commands
The "angular.json" File - A Closer Look
Angular Schematics - An Introduction
The "ng add" Command
Using Custom "ng generate" Schematics
Smooth Updating of Projects with "ng update"
Simplified Deployment with "ng deploy"
Understanding "Differential Loading"
Managing Multiple Projects in One Folder
Angular Libraries - An Introduction
Wrap Up

Section 32 : Angular 6 Changes & New Features

A First Look At Angular Elements
What's New with Angular 8?

Section 33 : Bonus: TypeScript Introduction (for Angular 2 Usage)

Introduction
Using Types
Classes
Interfaces
Generics
Wrap up & Modules
Useful Resources & Links
Useful Resources & Links
Alternative Lazy Loading Syntax
Useful Resources & Links
Server Routing vs Browser Routing
Useful Resources & Links
Useful Resources & Links
Alternative Lazy Loading Syntax
Useful Resources & Links
Server Routing vs Browser Routing
Useful Resources & Links
[LEGACY] Using NgRx Effects with NgRx >= 7
[LEGACY] Useful Resources & Links
Important: Official Docs & Starting Project
Making Animations Work with Angular 4+
Further Links & Resources
Further Resources & Where to Go Next
What's New & How to Update
Updating to Angular 6 + Webpack 4

Popular Searches

Angular - The Complete Guide (2020 Edition)

Online

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

certificate availability

Who it is for

What you will learn

The syllabus

Section 1 : Getting Started

Section 2 : The Basics

Section 3 : Course Project - The Basics

Section 4 : Debugging

Section 5 : Components & Databinding Deep Dive

Section 6 : Course Project - Components & Databinding

Section 7 : Directives Deep Dive

Section 8 : Course Project - Directives

Section 9 : Using Services & Dependency Injection

Section 10 : Course Project - Services & Dependency Injection

Section 11 : Changing Pages with Routing

Section 12 : Course Project - Routing

Section 13 : Understanding Observables

Section 14 : Course Project - Observables

Section 15 : Handling Forms in Angular Apps

Section 16 : Course Project - Forms

Section 17 : Using Pipes to Transform Output

Section 18 : Making Http Requests

Section 19 : Course Project - Http

Section 20 : Authentication & Route Protection in Angular Apps

Section 21 : Dynamic Components

Section 22 : Using Angular Modules & Optimizing Apps

Section 23 : Deploying an Angular App

Section 24 : Bonus: The HttpClient

Section 25 : Bonus Working with NgRx in our Project

Section 26 : Bonus: Angular Universal

Section 27 : Angular Animations

Section 28 : Adding Offline Capabilities with Service Workers

Section 29 : A Basic Introduction to Unit Testing in Angular Apps

Section 30 : Course Roundup

Section 31 : Angular as a Platform & Closer Look at the CLI

Section 32 : Angular 6 Changes & New Features

Section 33 : Bonus: TypeScript Introduction (for Angular 2 Usage)

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone