Angular - The Complete Guide [2024 Edition] [Video]

Book Image

Angular - The Complete Guide [2024 Edition] [Video]

By : Maximilian Schwarzmüller

4.3 (3)

Book Image

Angular - The Complete Guide [2024 Edition] [Video]

4.3 (3)

By: Maximilian Schwarzmüller

Overview of this book

Welcome to our comprehensive Angular course designed for web development professionals seeking to master this powerful framework. This course begins with an introduction to Angular, explaining its evolution, stability, and why it stands out among other frameworks. You'll learn to set up your development environment and create your first Angular project, setting the stage for more complex applications. In the following sections, we delve into the essentials of Angular, including components, templates, and services. You'll discover how to manage and create components using Angular CLI, output dynamic content, and understand the intricacies of Angular's change detection mechanism. The course also covers advanced topics like module-based app structures, Angular services, dependency injection, and state management using NgRx. Each module is designed to build upon the last, ensuring a smooth learning curve and a thorough understanding of Angular's capabilities. From creating reusable components and working with forms to debugging and optimizing applications, this course offers a holistic approach to Angular development. By the end, you'll be equipped with the knowledge and skills to build, deploy, and maintain high-performance Angular applications, making you a valuable asset in the field of web development.

Free Chapter

Getting Started

Welcome To The Course!

What Exactly Is Angular?

Why Would You Use Angular?

Angular's Evolution and Stability

Creating A New Angular Project

Setting Up An Angular Development Environment

About This Course

Angular Essentials - Components, Templates, Services and More

Module Introduction

A New Starting Project and Analyzing The Project Structure

Understanding Components and How Content Ends Up On The Screen

Creating a First Custom Component

Configuring the Custom Component

Using the Custom Component

Styling the Header Component and Adding An Image

Managing and Creating Components with the Angular CLI

Styling and Using Our Next Custom Component

Preparing User Data (To Output Dynamic Content)

Storing Data in a Component Class

Outputting Dynamic Content with String Interpolation

Property Binding and Outputting Computed Values

Using Getters For Computed Values

Listening to Events with Event Binding

Managing State and Changing Data

A Look Behind The Scenes Of Angular's Change Detection Mechanism

Introducing Signals

We Need More Flexible Components!

Defining Component Inputs

Required and Optional Inputs

Using Signal Inputs

We Need Custom Events!

Working with Outputs and Emitting Data

Using the output() Function

Adding Extra Type Information To EventEmitter

Exercise: Create a Configurable Component

TypeScript: Working With Potentially Undefined Values and Union Types

Accepting Objects As Inputs and Adding Appropriate Typings

TypeScript: Type Aliases and Interfaces

Outputting List Content

Outputting Conditional Content

Legacy Angular: Using ngFor and ngIf

Adding More Components to the Demo App

Outputting User-specific Tasks

Outputting Task Data in the Task Component

Storing Data Models in Separate Files

Dynamic CSS Styling with Class Bindings

More Component Communication: Deleting Tasks

Creating and Conditionally Rendering Another Component

Managing The "New Task" Dialog

Using Directives and Two-Way-Binding

Signals and Two-Way-Binding

Handling Form Submission

Using the Submitted Data

Content Projection with ng-content

Transforming Template Data with Pipes

Getting Started with Services

Getting Started with Dependency Injection

More Service Usage and Alternative Dependency Injection Mechanism

Time to Practice: Services

Using localStorage for Data Storage

Angular Essentials - Working with Modules

Module Introduction

A First Introduction To Angular Modules (NgModule)

Creating a First Empty Module

Bootstrapping Apps with Angular Modules

Declaring and Using Components

A First Summary

Migrating All Components To Use Modules

Creating and Using Shared Modules

Creating More Complex Module-based App Structures

Angular Essentials - Time To Practice

Module Introduction and Starting Project

Adding a Header Component With An Image

Adding a User Input Component

Handling Form Submission

Extracting Values with Two-Way-Binding

Calculating the Annual Investment Data

Cross-Component Communication with Outputs

Creating and Using a Data Model

Passing Data from Parent to Child with Inputs

Outputting Data in a Table

Formatting Output with a Pipe

Using Signals and Resetting The Form After Submission

Using a Service for Cross-Component Communication

Using Signals in Services

Migrating to Angular Modules

Debugging Angular Apps

Module Introduction

Understanding Error Messages and Fixing Errors

Debugging Logical Errors with the Browser DevTools and Breakpoints

Exploring the Angular DevTools

Components and Templates - Deep Dive

Module Introduction

Starting Project and An Opportunity For Smaller Components?

When and How To Split Up Components

Splitting A Component Into Multiple Components

Creating Reusable Components

Component Inputs: Repetition

Property Binding: Repetition

Using Content Projection and ng-content

Adding Forms to Components

A Possible, But Not Ideal Way Of Extending Built-in Elements

Extending Built-in Elements with Custom Components via Attribute Selectors

Supporting Content Projection with Multiple Slots

Exploring Advanced Content Projection

Defining Content Projection Fallbacks

Multi-Element Custom Components and Content Projection

Scoping CSS Styles to Components

Understanding and Configuring View Encapsulation

Making Sense of Component Host Elements

Using Host Elements Like Regular Elements

Interacting With Host Elements From Inside Components

When (Not) To Rely On Host Elements

Interacting with Host Elements via @HostListener and @HostBinding

Accessing Host Elements Programmatically

Class Bindings: Repetition

There's More Than One Way Of Binding CSS Classes Dynamically

A Closer Look At Dynamic Inline Style Binding

Manipulating State and Using Literal Values

Introducing the Component Lifecycle: ngOnInit

Implementing Lifecycle Interfaces

Component Lifecycle - A Deep Dive

Component Cleanup with ngOnDestroy

Component Cleanup with DestroyRef

Handling Form Submissions: Repetition

Working with Template Variables

Extracting Input Values via Template Variables

Template Variables and Component Instances

Getting Access to Template Elements via ViewChild

Using The viewChild Signal Function

ViewChild vs ContentChild

A Closer Look at Decorator-based Queries and Lifecycle Hooks

The afterRender and afterNextRender Lifecycle Functions

Making Sense of Signal Effects

TypeScript and Type Models: Repetition

Component Outputs: Repetition

A Closer Look At Template For Loops

Revisiting Inputs and Signals

Updating Signal Values

Cross-Component Communication and State Management

Configuring Component Inputs and Outputs

Two-Way Binding: Repetition

Setting Up Custom Two-Way Binding

An Easier Way of Setting Up Custom Two-Way Binding

Enhancing Elements with Directives - Deep Dive

Module Introduction

Understanding Directives

The Starting Project

Analyzing a Built-in Attribute Directive: ngModel

Analyzing a Built-in Structural Directive: ngIf

Getting Started with Custom Directives

Using Attribute Directives To Change Element Behavior

Working with Inputs in Custom Directives

Directives and Dependency Injection

Building Another Directive

Building a Custom Structural Directive

Structural Directives and Syntactic Sugar

Host Directives and Composition

Transforming Values with Pipes - Deep Dive

Module Introduction

Making Sense of Pipes

Using Built-in Pipes

More Built-in Pipes Examples

Building a First Custom Pipe

Using Custom Pipes to Perform Custom Transformations

Accepting Parameters in Custom Pipes

Chaining Pipes and Being Aware of Limitations

Building a Pipe That Sorts Items

Understanding How Pipes Are Executed

Pure and Impure Pipes

Pipe Limitations and When Not To Use Them

Understanding Services and Dependency Injection - Deep Dive

Module Introduction

The Starting Project and The Need For A Centralized Service

Creating a Service

How NOT To Provide A Service

Using Angular's Dependency Injection Mechanism

Using The Alternative Dependency Injection Syntax

Outsourcing and Reusing Logic with Services

Angular Has Multiple Injectors!

There Are Multiple Ways Of Providing a Service

Providing Services via the Element Injector

Understanding the Element Injector's Behavior

Injecting Services Into Services

Analyzing Dependency Injection with the Angular DevTools

Using Custom DI Tokens and Providers

Preparing A Non-Class Value For Injection

Injecting Other Values (NOT Services)

Angular Modules (NgModule) and Dependency Injection

Working with Services Without Using Signals

Making Sense of Change Detection - Deep Dive

Module Introduction

Analyzing the Starting Project

Understanding How Angular Performs Change Detection

Change Detection During Development: ExpressionChangedAfterChecked Errors

Writing Efficient Template Bindings

Avoiding Zone Pollution

Using the OnPush Strategy

Understanding the OnPush Strategy

Working with OnPush and Signals

Using Signals for Sharing Data Across Components (with OnPush)

The Problem With OnPush, Cross-Component Data and Not Using Signals

Triggering Change Detection Manually and Using RxJS Subjects

Introducing The async Pipe

Going Zoneless!

Working with RxJS (Observables) - Deep Dive

Module Introduction

What Are Observables and What Is RxJS?

Creating and Using an Observable

Working with RxJS Operators

Working with Signals

Signals vs Observables

Converting Signals To Observables

Converting Observables To Signals

Deep Dive: Creating and Using A Custom Observable From Scratch

Sending HTTP Requests and Handling Responses

Module Introduction

The Starting Projects: Frontend and Backend

How To Connect Angular Apps To A Backend

Getting Started with Angular's Http Client

Sending a GET Request To Fetch Data

Configuring Http Requests

Transforming and Using Response Data

Showing a Loading Fallback

Handling HTTP Errors

Sending Data To A Backend

More Data Fetching and Some Code Duplication

Outsourcing HTTP Request Logic Into A Service

Managing HTTP-loaded Data via a Service

Implementing Optimistic Updating

Potential Problems Introduced by Optimistic Updating

Improved Optimistic Updating

Implementing App-wide Error Management

Practice: Sending DELETE Requests

Introducing HTTP Interceptors

Introducing HTTP Response Interceptors

Handling User Input and Working with Forms (Template-driven and Reactive)

Module Introduction

Template-driven vs Reactive Forms

Template-driven: Registering Form Controls

Getting Access to the Angular-managed Form

Extracting User Input Values

Validating Input with Form Validation Directives

Using the Form Validation Status To Provide User Feedback

Adding Validation Styles

Interacting With The Underlying Form Object In The Component

Updating Form Values Programmatically

Reactive Forms: Getting Started

Syncing Reactive Form Definition and Template

Handling Form Submission (Reactive Forms)

Adding Validators To Reactive Forms

Building Custom Validators

Creating and Using Async Validators

Interacting with the Form Programmatically

Exercise: Problem

Exercise: Solution

Connecting and Registering Inputs For A Complex Form

Working with Nested Form Groups

Working with Form Arrays

Practice: Adding More Validation

Creating Multi-Input Validators / Form Group Validators

Routing and Building Multi-page Single Page Applications

Module Introduction

What Is Routing?

Enabling Routing and Adding a First Route

Rendering Routes

Registering Multiple Routes

Adding Links The Right Way

Styling Active Navigation Links

Setting Up and Navigating To Dynamic Routes

Extracting Dynamic Route Parameters via Inputs

Extracting Dynamic Route Parameters via Observables

Working with Nested Routes

Route Links and Relative Links

Accessing Parent Route Data From Inside Nested Routes

Loading Data Based On Route Parameters In Child Routes

Link Shortcuts and Programmatic Navigation

Adding A "Not Found" Route

Redirecting Users

Splitting Route Definitions Across Multiple Files

Activated Route vs Activated Route Snapshot

Setting Query Parameters

Extracting Query Parameters via Inputs

Extracting Query Parameters via Observables

Using Query Parameters For Data Manipulation

Adding Static Data To Routes

Resolving Route-related Dynamic Data

Accessing Route Data In Components

Controlling Route Resolver Execution

Setting and Resolving Titles

Introducing Route Guards

Making Sense of The CanDeactivate Guard

Improving The CanDeactivate Logic

Reloading Pages via the Angular Router and Configuring Programmatic Navigation

Code Splitting and Deferrable Views

Module Introduction

What Is Lazy Loading / Code Splitting?

Introducing Route-based Lazy Loading

Implementing Route-based Lazy Loading

Lazy Loading Entire Route Groups

Using Lazy Loading and Routing to Lazy-load Services

Introducing Deferrable Views

Defer Loading Until Viewport Visibility

Deferrable Views: Using Other Triggers

Prefetching Lazy-loaded Code

Deferrable Views: Summary

Deploying Angular Apps - CSR, SSR, SGA

Module Introduction

Preparing a Project For Deployment: Building It For Production

Building SPAs: Pros and Cons

SPAs: Deployment Example

Using "ng add", "ng deploy" and Angular's Built-in Deployment Support

Server-side Rendering (SSR) Introduction

Setting Up SSR For An Angular App

Building and Service an SSR App

Authoring SSR-ready Code (Beware of Pitfalls!)

SSR and Client-Server Mismatches

Static Site Generation (SSG) Introduction

Configuring and Using SSG

Deployment Methods - A Summary

Course Roundup and Next Steps

About The Rest Of This Course

The Basics

Module Introduction

Loading and Starting an Angular Application

Important Components

Creating a New Component

Understanding the Role of AppModule and Component Declaration

Using Custom Components

Creating Components with the Command Line Input (CLI) and Nesting Components

Working with Component Templates

Working with Component Styles

Understanding the Component Selector

Assignment Solution

What Is Data Binding?

String Interpolation

Property Binding

Property Binding Versus String Interpolation

Passing and Using Data with Event Binding

Two-Way Data Binding

Combining All Forms of Data Binding

Assignment Solution

Understanding Directives

Using the ngIf Directive to Display Data Conditionally

Enhancing the ngIf Directive with an Else Condition

Styling Elements Dynamically with the ngStyle Directive

Applying CSS Classes Dynamically with the ngClass Directive

Displaying Lists Using the ngFor Directive

Assignment Solution

Getting the Index When Using the ngFor Directive

Course Project - the Basics

Project Introduction

Planning the Application

Setting Up the Application

Creating Components

Using Components

Adding a Navigation Bar

Creating a "Recipe" Model

Adding Content to the Recipes' Components

Displaying a List of Recipes Using the ngFor Directive

Displaying Recipe Details

Working on the ShoppingList Component

Creating an "Ingredients" Model

Creating and Displaying the Shopping List

Adding a Shopping List Edit Section

Wrapping Up and Next Steps

Debugging

Understanding Angular Error Messages

Debugging Code in the Browser Using Source Maps

Components and Databinding Deep Dive

Module Introduction

Splitting Applications into Components

Property and 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

Getting Access to the Template and Document Object Model (DOM) with the @ViewChild Component

Projecting Content into Components with ng-content

Understanding the Component Lifecycle

Seeing Lifecycle Hooks in Action

Lifecycle Hooks and Template Access

Getting Access to ng-content with the @ContentChild Parameter Decorator

Assignment Solution

Course Project - Components and Data Binding

Adding Navigation with Event Binding and the ngIf Directive

Passing Recipe Data with Property Binding

Passing Data with Event and Property Binding (Combined)

Allowing the User to Add Ingredients to the Shopping List

Directives Deep Dive

Module Introduction

ngFor and ngIf Directives Recap

ngClass and ngStyle Recap

Creating a Basic Attribute Directive

Using the Renderer to Build a Better Attribute Directive

Using the @HostListener() Decorator to Listen to Host Events

Using the @HostBinding() Decorator to Bind to Host Properties

Binding to Directive Properties

What Happens Behind the Scenes on Structural Directives

Building a Structural Directive

Understanding the ngSwitch Directive

Course Project – Directives

Building and Using a Dropdown Directive

Using Services and 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 Are Required?

Injecting Services into Other Services

Using Services for Cross-Component Communication

Assignment Solution

Course Project - Services and Dependency Injection

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 Pushing Data from A to B

Adding Ingredients to Recipes

Passing Ingredients from Recipes to the Shopping List (Through a Service)

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

Some Common Gotchas

Setting Up Child (Nested) Routes

Using Query Parameters – Practice

Configuring the Handling of Query Parameters

Redirecting and Wildcard Routes

Outsourcing the Route Configuration

An Introduction to Guards

Protecting Routes with the canActivate() Method

Protecting Child (Nested) Routes Using the canActivateChild() Method

Using a Fake Authentication Service

Controlling Navigation with the canDeactivate() Method

Passing Static Data to a Route

Resolving Dynamic Data with the Resolve Guard

Understanding Location Strategies

Course Project – Routing

Planning the General Structure

Setting Up Routes

Adding Navigation to the Application

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

Understanding Observables

Module Introduction

Analyzing Angular Observables

Getting Closer to the Core of Observables

Building a Custom Observable

Errors and Completion

Understanding Operators

Course Project – Observables

Improving the Reactive Service with Observables (Subjects)

Handling Forms in Angular Apps

Module Introduction

Why do We Need Angular's Help?

Template-Driven (TD) Versus Reactive Approach

Creating an Example Form

Template-Driven (TD): Creating Forms and Registering the Controls

Template-Driven (TD): Submitting and Using a Form

Template-Driven (TD): Understanding Form State

Template-Driven (TD): Accessing a Form Using the @ViewChild Decorator

Template-Driven (TD): Adding Validation to Check User Input

Template-Driven (TD): Using the Form State

Template-Driven (TD): Displaying Validation Error Messages

Template-Driven (TD): Set Default Values Using the ngModel Property Binding

Template-Driven (TD): Using ngModel with Two-Way Binding

Template-Driven (TD): Grouping Form Controls

Template-Driven (TD): Handling Radio Buttons

Template-Driven (TD): Setting and Patching Form Values

Template-Driven (TD): Using Form Data

Template-Driven (TD): Resetting Forms

Introduction to the Reactive Approach

Reactive: Form Template Setup

Reactive: Creating a Form in Code

Reactive: Syncing HTML and Form

Reactive: Submitting a Form

Reactive: Adding Validation

Reactive: Getting Access to Controls

Reactive: Grouping Controls

Reactive: Arrays of FormControl (FormArray)

Reactive: Creating Custom Validators

Reactive: Using Error Codes

Reactive: Creating a Custom Asynchronous Validator

Reactive: Reacting to Status or Value Changes

Reactive: Setting and Patching Values

Assignment Solution

Course Project – Forms

TD: Adding the Shopping List Form

Adding Validation to a Form

Allowing Selection of Items in a List

Loading Shopping List Items into a Form

Updating Existing Items

Resetting a Form

Allowing the User to Clear (Cancel) a Form

Allowing the Deletion of Shopping List Items

Creating a Template for the (Reactive) Recipe Edit Form

Creating a Form to Edit Recipes

Syncing HTML with a Form

Adding Ingredient Controls to a FormArray

Adding New Ingredient Controls

Validating User Input

Submitting the Recipe Edit Form

Adding the Delete and Clear (Cancel) Functionality

Redirecting a User (After Deleting a Recipe)

Adding an Image Preview

Providing the Recipe Service Correctly

Deleting Ingredients and Some Finishing Touches

Using Pipes to Transform the Output

Introduction and Why Pipes Are Useful

Parametrizing Pipes

Learning More About Pipes

Chaining Multiple Pipes

Creating a Custom Pipe

Parametrizing a Custom Pipe

Example: Creating a Filter Pipe

Pure and Impure Pipes (How to "Fix" the Filter Pipe?)

Understanding the "Async" Pipe

Making HTTP Requests

A New Integrated Development Environment (IDE)

Module Introduction

How Does Angular Interact with Backends?

Anatomy of an HTTP Request

Setting Up Backend (Firebase)

Sending a POST Request

Sending a GET Request

Using Reactive Extensions for JavaScript (RxJS) Operators to Transform Response Data

Using Types with HttpClient

Outputting Posts

Showing a Loading Indicator

Using a Service for HTTP Requests

Working of Services and Components

Sending a DELETE Request

Handling Errors

Using Subjects for Error Handling

Using the catchError Operator

Error Handling and User Experience (UX)

Setting Headers

Adding Query Parameters

Observing Different Types of Responses

Changing the Response Body Type

Introducing Interceptors

Manipulating Request Objects

Response Interceptors

Multiple Interceptors

Course Project – HTTP

Module Introduction

Setting Up Backend (Firebase)

Setting Up the Data Storage Service

Storing Recipes

Fetching Recipes

Transforming Response Data

Resolving Data before Loading

Fixing a Bug with the Resolver

Authentication and Route Protection in Angular Apps

Module Introduction

Working of Authentication

Adding the Authentication Page

Switching between Authentication Modes

Handling Form Input

Preparing the Backend

Preparing the Signup Request

Sending the Signup Request

Adding Loading Spinner and Error Handling Logic

Improving Error Handling

Sending Login Requests

Handling Login Error

Creating and Storing the User Data

Reflecting the Authentication State in the User Interface (UI)

Adding a Token to Outgoing Requests

Attaching a Token with an Interceptor

Adding Auto-Login

Adding Auto-Logout

Adding an Authentication Guard

Dynamic Components

Module Introduction

Adding an Alert Modal Component

Understanding the Different Approaches

Using the ngIf Directive

Preparing Programmatic Creation

Creating a Component Programmatically

Understanding entryComponents

Data Binding and Event Binding

Angular Modules and Optimizing Angular Applications

Module Introduction

What are Modules?

Analyzing the AppModule Class

Getting Started with Feature Modules

Splitting Modules Correctly

Adding Routes to Feature Modules

Component Declarations

ShoppingList Feature Module

Understanding Shared Modules

Understanding Core Modules

Adding an Authentication Feature Module

Understanding Lazy Loading

Implementing Lazy Loading

More Lazy Loading

Preloading Lazy-Loaded Code

Modules and Services

Loading Services Differently

Standalone Components

Module Introduction

Starting Setup and Why We Want Standalone Components

Building a First Standalone Component

Standalone Directives and Connecting Building Blocks

Migrating Another Component

A Standalone Root Component

Services and Standalone Components

Routing with Standalone Components

Angular Signals

Module Introduction

Signals - What and Why?

Creating a New Signal

Updating a Signal Value

Reading and Outputting a Signal Value

Signal Updating - set(), update(), and mutate()

Important - Signals Are NOT Finished Yet!

Computed Values and Effects

Bonus - Using NgRx for State Management

Module Introduction

Understanding NgRx and Its Building Blocks

Project Setup and Installing NgRx

Adding a First Reducer and Store Setup

An Alternative Way of Creating Reducers

Reading Data from the Store

Introducing Actions and State Changing Reducers

Dispatching Actions

Attaching Data to Actions

Handling Actions without createReducer

An Alternative Way of Defining Actions

Time to Practice - A Second Action

Exploring Selectors

Introducing Effects

Installing the Effects Package

Defining a First Effect

The Old @Effect Decorator and Registering Effects

Using Store Data in Effects

Adding a Second Effect

Getting Started with Reducers

Adding Logic to the Reducer

Understanding and Adding Actions

Setting Up the NgRx Store

Selecting State

Dispatching Actions

Multiple Actions

Preparing Update and Delete Actions

Updating and Deleting Ingredients

Expanding the State

Managing More State Through NgRx

Removing Redundant Component State Management

First Summary and Clean Up

Setting Up Auth Reducer and Actions

Dispatching Auth Actions

Auth Finished (For Now…)

An Important Note on Actions

Exploring NgRx Effects

Defining the First Effect

Effects and Error Handling

Login Through NgRx Effects

Managing UI State in NgRx

Finishing the Login Effect

Preparing Other Auth Actions

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 and Using the Resolver

Fixing the Auth Redirect

Update, Delete and Add Recipes

Storing Recipes Through Effects

Angular Animations

Setting Up the Starting Project

Animation Triggers and State

Switching between States

Advanced Transitions

Transition Phases

The "Void" State

Using Keyframes for Animations

Grouping Transitions

Using Animation Callbacks

Adding Offline Capabilities with Service Workers

Module Introduction

Adding Service Workers

Caching Assets for Offline Use

Caching Dynamic Assets and URLs

A Basic Introduction to Unit Testing in Angular Apps

Why Unit Tests?

Analyzing the Testing Setup (As Created by the Command Line Interface (CLI))

Running Tests (With the Command Line Interface (CLI))

Adding a Component and Some Fitting Tests

Testing Dependencies: Components and Services

Simulating Asynchronous Tasks

Using "fakeAsync" and "Tick"

Isolated Versus Non-Isolated Tests

Angular as a Platform and a Closer Look at the Command Line Interface (CLI)

Module Introduction

A Closer Look at the "ng new" Command

Integrated Development Environment (IDE) and Project Setup

Understanding the Configuration Files

Important Command Line Interface (CLI) Commands

The "angular.json" File - a Closer Look

Angular Schematics - an Introduction

The "ng add" Command

Using Custom "ng generate" Schematics

Updating Projects Using the "ng update" Command

Deploying with the "ng deploy" Command

Understanding "Differential Loading"

Managing Multiple Projects in One Folder

Angular Libraries - an Introduction

Bonus: TypeScript Introduction (for Angular 2 Usage)

Module Introduction

Installing and Using TypeScript

Base Types and Primitives

Array and Object Types

Working with Union Types

Assigning Type Aliases

Diving into Functions and Function Types

Understanding Generics

Classes and TypeScript

Working with Interfaces

Configuring the TypeScript Compiler

Customer Reviews

4.3 (3)

5 star

66.7%

4 star

0

3 star

33.3%

2 star

0

1 star

0

Chapter 27

Changing Pages with Routing

Content Locked

Section 6

Styling Active Router Links

In this video, we will demonstrate how to style active router links, providing visual feedback to users on their current location.