on-demand course

Angular - The Complete Guide [2024 Edition]

with Maximilian Schwarzmüller

June 2024

Intermediate

25h 25m

English

Packt Publishing

Closed Captioning available in German, English, Spanish, French, Italian, Japanese, Korean, Chinese (Simplified)

Watch now

Unlock full access

Includes

Includes Quizzes

Earns Badge

Course outline

Welcome To The Course!
1m 32s
What Exactly Is Angular?
1m 50s
Why Would You Use Angular?
6m 42s
Angular's Evolution and Stability
4m 44s
Creating A New Angular Project
7m 2s
Setting Up An Angular Development Environment
4m 48s
About This Course
3m 18s
Module Introduction
1m 19s
A New Starting Project and Analyzing The Project Structure
6m 27s
Understanding Components and How Content Ends Up On The Screen
6m 18s
Creating a First Custom Component
5m 15s
Configuring the Custom Component
5m 21s
Using the Custom Component
6m 9s
Styling the Header Component and Adding An Image
6m 20s
Managing and Creating Components with the Angular CLI
4m 28s
Styling and Using Our Next Custom Component
5m 9s
Preparing User Data (To Output Dynamic Content)
2m 7s
Storing Data in a Component Class
3m 55s
Outputting Dynamic Content with String Interpolation
2m 30s
Property Binding and Outputting Computed Values
4m 37s
Using Getters For Computed Values
3m 29s
Listening to Events with Event Binding
4m 5s
Managing State and Changing Data
3m 7s
A Look Behind The Scenes Of Angular's Change Detection Mechanism
2m 7s
Introducing Signals
12m 53s
We Need More Flexible Components!
3m 40s
Defining Component Inputs
8m 17s
Required and Optional Inputs
2m 56s
Using Signal Inputs
14m 0s
We Need Custom Events!
1m 48s
Working with Outputs and Emitting Data
6m 59s
Using the output() Function
6m 12s
Adding Extra Type Information To EventEmitter
1m 58s
Exercise: Create a Configurable Component
8m 48s
TypeScript: Working With Potentially Undefined Values and Union Types
8m 6s
Accepting Objects As Inputs and Adding Appropriate Typings
4m 46s
TypeScript: Type Aliases and Interfaces
3m 11s
Outputting List Content
5m 33s
Outputting Conditional Content
4m 26s
Legacy Angular: Using ngFor and ngIf
5m 21s
Adding More Components to the Demo App
6m 14s
Outputting User-specific Tasks
6m 31s
Outputting Task Data in the Task Component
4m 4s
Storing Data Models in Separate Files
3m 44s
Dynamic CSS Styling with Class Bindings
4m 37s
More Component Communication: Deleting Tasks
5m 26s
Creating and Conditionally Rendering Another Component
5m 25s
Managing The "New Task" Dialog
6m 31s
Using Directives and Two-Way-Binding
10m 46s
Signals and Two-Way-Binding
2m 19s
Handling Form Submission
3m 21s
Using the Submitted Data
7m 20s
Content Projection with ng-content
6m 48s
Transforming Template Data with Pipes
3m 16s
Getting Started with Services
6m 16s
Getting Started with Dependency Injection
8m 2s
More Service Usage and Alternative Dependency Injection Mechanism
5m 17s
Time to Practice: Services
3m 17s
Using localStorage for Data Storage
5m 40s
Module Summary
8m 45s
Module Introduction
2m 16s
A First Introduction To Angular Modules (NgModule)
3m 6s
Creating a First Empty Module
2m 56s
Bootstrapping Apps with Angular Modules
5m 22s
Declaring and Using Components
4m 46s
A First Summary
2m 15s
Migrating All Components To Use Modules
6m 50s
Creating and Using Shared Modules
4m 13s
Creating More Complex Module-based App Structures
7m 22s
Module Introduction and Starting Project
5m 19s
Adding a Header Component With An Image
5m 11s
Adding a User Input Component
6m 42s
Handling Form Submission
2m 30s
Extracting Values with Two-Way-Binding
8m 10s
Calculating the Annual Investment Data
5m 5s
Cross-Component Communication with Outputs
9m 25s
Creating and Using a Data Model
2m 59s
Passing Data from Parent to Child with Inputs
10m 10s
Outputting Data in a Table
4m 57s
Formatting Output with a Pipe
1m 39s
Using Signals and Resetting The Form After Submission
9m 56s
Using a Service for Cross-Component Communication
9m 35s
Using Signals in Services
4m 11s
Migrating to Angular Modules
8m 8s
Module Summary
1m 13s
Module Introduction
1m 42s
Understanding Error Messages and Fixing Errors
3m 47s
Debugging Logical Errors with the Browser DevTools and Breakpoints
6m 19s
Exploring the Angular DevTools
3m 50s
Module Introduction
2m 0s
Starting Project and An Opportunity For Smaller Components?
2m 34s
When and How To Split Up Components
4m 25s
Splitting A Component Into Multiple Components
8m 46s
Creating Reusable Components
3m 58s
Component Inputs: Repetition
5m 23s
Property Binding: Repetition
8m 32s
Using Content Projection and ng-content
2m 58s
Adding Forms to Components
6m 1s
A Possible, But Not Ideal Way Of Extending Built-in Elements
4m 27s
Extending Built-in Elements with Custom Components via Attribute Selectors
5m 8s
Supporting Content Projection with Multiple Slots
6m 32s
Exploring Advanced Content Projection
3m 11s
Defining Content Projection Fallbacks
2m 9s
Multi-Element Custom Components and Content Projection
7m 29s
Scoping CSS Styles to Components
5m 3s
Understanding and Configuring View Encapsulation
5m 22s
Making Sense of Component Host Elements
2m 53s
Using Host Elements Like Regular Elements
4m 30s
Interacting With Host Elements From Inside Components
2m 6s
When (Not) To Rely On Host Elements
6m 8s
Interacting with Host Elements via @HostListener and @HostBinding
5m 14s
Accessing Host Elements Programmatically
4m 3s
Class Bindings: Repetition
4m 25s
There's More Than One Way Of Binding CSS Classes Dynamically
3m 16s
A Closer Look At Dynamic Inline Style Binding
3m 31s
Manipulating State and Using Literal Values
4m 42s
Introducing the Component Lifecycle: ngOnInit
4m 3s
Implementing Lifecycle Interfaces
3m 11s
Component Lifecycle - A Deep Dive
15m 17s
Component Cleanup with ngOnDestroy
4m 7s
Component Cleanup with DestroyRef
2m 48s
Handling Form Submissions: Repetition
2m 46s
Working with Template Variables
7m 13s
Extracting Input Values via Template Variables
1m 54s
Template Variables and Component Instances
2m 35s
Getting Access to Template Elements via ViewChild
9m 28s
Using The viewChild Signal Function
6m 23s
ViewChild vs ContentChild
6m 58s
A Closer Look at Decorator-based Queries and Lifecycle Hooks
4m 58s
The afterRender and afterNextRender Lifecycle Functions
3m 9s
Making Sense of Signal Effects
5m 28s
TypeScript and Type Models: Repetition
3m 31s
Component Outputs: Repetition
4m 24s
A Closer Look At Template For Loops
5m 54s
Revisiting Inputs and Signals
5m 1s
Updating Signal Values
4m 50s
Cross-Component Communication and State Management
6m 14s
Configuring Component Inputs and Outputs
4m 6s
Two-Way Binding: Repetition
3m 55s
Setting Up Custom Two-Way Binding
8m 55s
An Easier Way of Setting Up Custom Two-Way Binding
3m 54s
Module Introduction
1m 3s
Understanding Directives
2m 57s
The Starting Project
1m 4s
Analyzing a Built-in Attribute Directive: ngModel
5m 41s
Analyzing a Built-in Structural Directive: ngIf
6m 29s
Getting Started with Custom Directives
8m 10s
Using Attribute Directives To Change Element Behavior
4m 48s
Working with Inputs in Custom Directives
8m 52s
Directives and Dependency Injection
4m 10s
Building Another Directive
7m 56s
Building a Custom Structural Directive
8m 22s
Structural Directives and Syntactic Sugar
3m 8s
Host Directives and Composition
8m 0s
Module Introduction
36s
Making Sense of Pipes
2m 55s
Using Built-in Pipes
2m 56s
More Built-in Pipes Examples
4m 18s
Building a First Custom Pipe
5m 58s
Using Custom Pipes to Perform Custom Transformations
3m 49s
Accepting Parameters in Custom Pipes
5m 57s
Chaining Pipes and Being Aware of Limitations
4m 45s
Building a Pipe That Sorts Items
6m 45s
Understanding How Pipes Are Executed
4m 15s
Pure and Impure Pipes
1m 45s
Pipe Limitations and When Not To Use Them
2m 53s
Module Introduction
59s
The Starting Project and The Need For A Centralized Service
3m 15s
Creating a Service
7m 27s
How NOT To Provide A Service
2m 24s
Using Angular's Dependency Injection Mechanism
5m 2s
Using The Alternative Dependency Injection Syntax
5m 27s
Outsourcing and Reusing Logic with Services
10m 56s
Angular Has Multiple Injectors!
4m 24s
There Are Multiple Ways Of Providing a Service
4m 16s
Providing Services via the Element Injector
3m 16s
Understanding the Element Injector's Behavior
3m 45s
Injecting Services Into Services
5m 27s
Analyzing Dependency Injection with the Angular DevTools
2m 29s
Using Custom DI Tokens and Providers
8m 27s
Preparing A Non-Class Value For Injection
5m 25s
Injecting Other Values (NOT Services)
10m 26s
Angular Modules (NgModule) and Dependency Injection
3m 6s
Working with Services Without Using Signals
2m 17s
Module Introduction
1m 52s
Analyzing the Starting Project
1m 52s
Understanding How Angular Performs Change Detection
4m 45s
Change Detection During Development: ExpressionChangedAfterChecked Errors
2m 46s
Writing Efficient Template Bindings
1m 19s
Avoiding Zone Pollution
5m 18s
Using the OnPush Strategy
3m 21s
Understanding the OnPush Strategy
8m 37s
Working with OnPush and Signals
2m 14s
Using Signals for Sharing Data Across Components (with OnPush)
4m 12s
The Problem With OnPush, Cross-Component Data and Not Using Signals
3m 13s
Triggering Change Detection Manually and Using RxJS Subjects
11m 1s
Introducing The async Pipe
4m 33s
Going Zoneless!
12m 59s

Content preview from Angular - The Complete Guide [2024 Edition]

What Is Routing?

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition

Academind by Maximilian Schwarzmüller GmbH

Clean Code Fundamentals

Robert C. Martin

Modern JavaScript from The Beginning [Second Edition] - Second Edition

Brad Traversy

Modern JavaScript From The Beginning

Brad Traversy

Publisher Resources

ISBN: 9781788998437Supplemental Content

Angular - The Complete Guide [2024 Edition]

with Maximilian Schwarzmüller

Chapter 1 : Getting Started

Chapter 2 : Angular Essentials - Components, Templates, Services and More

Chapter 3 : Angular Essentials - Working with Modules

Chapter 4 : Angular Essentials - Time To Practice

Chapter 5 : Debugging Angular Apps

Chapter 6 : Components and Templates - Deep Dive

Chapter 7 : Enhancing Elements with Directives - Deep Dive

Chapter 8 : Transforming Values with Pipes - Deep Dive

Chapter 9 : Understanding Services and Dependency Injection - Deep Dive

Chapter 10 : Making Sense of Change Detection - Deep Dive

Chapter 11 : Working with RxJS (Observables) - Deep Dive

Chapter 12 : Sending HTTP Requests and Handling Responses

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

Chapter 14 : Routing and Building Multi-page Single Page Applications

Chapter 15 : Code Splitting and Deferrable Views

Chapter 16 : Deploying Angular Apps - CSR, SSR, SGA

Chapter 17 : Course Roundup and Next Steps

Content preview from Angular - The Complete Guide [2024 Edition]

What Is Routing?

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

You might also like

React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition

Clean Code Fundamentals

Modern JavaScript from The Beginning [Second Edition] - Second Edition

Modern JavaScript From The Beginning

Publisher Resources

Chapter 1 : Getting Started

Chapter 2 : Angular Essentials - Components, Templates, Services and More

Chapter 3 : Angular Essentials - Working with Modules

Chapter 4 : Angular Essentials - Time To Practice

Chapter 5 : Debugging Angular Apps

Chapter 6 : Components and Templates - Deep Dive

Chapter 7 : Enhancing Elements with Directives - Deep Dive

Chapter 8 : Transforming Values with Pipes - Deep Dive

Chapter 9 : Understanding Services and Dependency Injection - Deep Dive

Chapter 10 : Making Sense of Change Detection - Deep Dive

Chapter 11 : Working with RxJS (Observables) - Deep Dive

Chapter 12 : Sending HTTP Requests and Handling Responses

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

Chapter 14 : Routing and Building Multi-page Single Page Applications

Chapter 15 : Code Splitting and Deferrable Views

Chapter 16 : Deploying Angular Apps - CSR, SSR, SGA

Chapter 17 : Course Roundup and Next Steps

Content preview from Angular - The Complete Guide [2024 Edition]

What Is Routing?

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,and much more.

You might also like

React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition

Clean Code Fundamentals

Modern JavaScript from The Beginning [Second Edition] - Second Edition

Modern JavaScript From The Beginning

Publisher Resources

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.