Angular — The Complete Guide
A Web Framework
For Building Highly Interactive Web Applications
Or dive right into the
Deep Dives
sections that are most
interesting to you! Components And become an
Directives
Pipes Angular developer!
Services & DI
Change Detection
HTTP
Forms
Routing
…
Start with no
Angular knowledge
Essentials
Maximilian Schwarzmüller
Professional Web Developer & Course Instructor
@maxedapps
maximilian-schwarzmueller.com
academind.com
Welcome To The Course
Maximilian Schwarzmüller
@maxedapps
maximilian-schwarzmueller.com
academind.com
Advanced Concepts
Angular Essentials
No prior Angular
experience required!
Basic web development & JavaScript
experience is all you need
What Is Angular?
And why would you use it?
What Is Angular?
Angular is a frontend JavaScript framework It’s also a collection of tools & features
It helps with building interactive, modern web user interfaces CLI, Debugging Tools, IDE Plugins
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Why would you use Angular?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Why a framework?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
You don’t need it!
For trivial websites and web apps!
But that changes as your applications get more complex!
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Why a framework?
Simplifies the process of building complex, interactive web user interfaces
Write declarative code
Separation of concerns via components
Object-oriented programming concepts & principles
Use TypeScript
Maximilian Schwarzmüller — “Angular - The Complete Guide”
With “Just JavaScript”
You write imperative code!
Step-by-step instructions (in code) that tell the browser what to do
Example
1) Find DOM element & store in variable
2) Add event listener to element
3) In triggered function: Find another element
4) Set CSS visibility of that element to 0
5) Create a new <p> DOM element
6) Set text content of <p> to “Hello World!”
7) Find element into which the <p> should be inserted
8) Insert <p> element
And so on …
Maximilian Schwarzmüller — “Angular - The Complete Guide”
With Angular
You write declarative code!
Define the target UI states & how they change and let Angular do the rest
Example
1) Manage “activeTab” state property
2) Depending on “activeTab”, show di!erent content
3) Change “activeTab” upon click on tab element
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Why Components?
Better Development
Modular Applications
Process
Break up complex applications into simple building blocks Assign di!erent team members to di!erent components
Split up responsibilities & concerns Share components & logic across the team
Build a component once and re-use it as often as needed Reduce dependencies
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Using TypeScript
TypeScript is a JavaScript superset — an extension of JavaScript
It extends the JavaScript syntax to support strong & strict typing
Unlike “vanilla JavaScript”, TypeScript enforces types and
prevents unexpected value type changes
TypeScript is not an Angular feature but can be used
independently — Angular embraces it though, hence all Angular
projects use TypeScript
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Easier Development With TypeScript
With TypeScript, you can often catch errors early on during development
For this course, you don’t need to know TypeScript!
You’ll learn it along the way and there also is an optional “TypeScript
Crash Course” section at the end of the course — you can always go
through that section if you’re struggling to follow along with TypeScript
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Why Angular?
Highly scalable, well maintained, innovative & batteries included
Developed & used by Google
Improvements, fixes & features are added continuously
The framework keeps evolving
Backward-compatibility & stability is a number 1 priority
It’s a all-in-one package — lots of core features are built-in
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular: A Stable Yet Evolving Framework
Angular has backward-compatibility as a number 1 priority
At the same time, the Angular keeps innovating & aims to
improve and advance the framework over time
Angular: A Stable Yet Evolving Framework
2016 Angular 2 is released
2017 Angular 4 is released (v3 is skipped) The Angular team has a versioning & release
policy where a new major version is
released every ~6 months
2017 Angular 5 is released BUT: Despite labeled as major versions,
these releases do NOT break your code &
“change the framework”
… Angular 6 - 13 are released
2022 Angular 14 & 15 are released Angular 14 introduces “Standalone Components”
2023 Angular 16 is released Angular 16 introduces “Signals”
Angular keeps innovating & changing - with backward compatibility as a top priority
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Different Projects, Different Versions
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Creating an Angular Project
Maximilian Schwarzmüller — “Angular - The Complete Guide”
About This Course
Deep Dives
Components
Directives
Pipes
Services & DI
Change Detection
HTTP
Forms
Routing
…
Essentials
Maximilian Schwarzmüller — “Angular - The Complete Guide”
This Course Kind Of Includes Two Courses
This course was re-recorded & I’m currently keeping the old course online
Modern Angular Legacy Angular
Covers key features like Does NOT use standalone
standalone components & components & signals
signals right from the start
Instead uses “older” Angular
Still also teaches you “older” features & syntax that’s still
Angular features since you valid but not the most
might need them for some modern way of writing
projects Angular code
Simply continue with the Use the attached link to jump
next lectures & sections to ahead to the “old course” if
take this course! you need to learn about this
older version
You can ignore the course you’re not taking — simply mark lectures as completed manually or
watch at double speed to quickly pace through it (to get 100% course completion)
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Essentials
Understanding Angular Project Structure
Working with Components
Handling User Events
Rendering & Updating Dynamic UI Content
Maximilian Schwarzmüller — “Angular - The Complete Guide”
You Build A Component Tree
One Angular Application = One Component Tree
AppComponent
HeaderComponent UserComponent TasksComponent
TaskComponent
Maximilian Schwarzmüller — “Angular - The Complete Guide”
There Are Two Approaches For Updating State
Option 1 Option 2
Relying on Zone.js & Angular’s change Using Signals to notify Angular about
detection mechanism value changes & required UI updates
Works automatically, no special Requires usage of special “signal”
instructions required instructions & code
Supported since Angular 2 Supported since Angular 16
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Signals Are Trackable Data Containers
Signal
A signal is an object that stores a value (any type of value, including nested objects)
ANY VALUE
AppComponent UserComponent computed Signal
Angular manages subscriptions to the signal to get notified about value changes
When a change occurs, Angular is then able to
update the part of the UI that needs updating
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular’s Change Detection Mechanism
A “Zone”
Zone.js notifies Angular about user events, expired timers etc.
AppComponent Checking for changes
Checking for changes
HeaderComponent UserComponent TasksComponent
Checking for changes Checking
Checking for for changes
changes TaskComponent
User clicks button
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Directives
With Angular, you can “enhance” elements by adding so-called Directives to them
<input ngModel>
NgModel Directive
An “element enhancement” that helps with
extracting (or changing) user input values
Directives, unlike components, don’t have a template!
Components Directives
Components are directives! Directives with templates
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Exercise
Create and use a “Tasks” component (app-tasks)
Receive & output the name of the selected user
HINT
You can find a user with a specific id in the DUMMY_USERS array like this:
DUMMY_USERS.find(user => user.id === selectedUserId)!
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Services
For centralized & sharable data- and logic-management
SomeService
Injected
SomeComponent OtherComponent
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Two-Way-Binding
Change data AND listen to data changes at the same time
Example:
<input />
Bind entered value to Bind property to entered
property value
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Modules
Understanding Angular Modules (NgModule)
Using Modules Instead Of Standalone Components
Declaring & Exporting Components
Shared Modules
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Modules Exist For Historic Reasons
When Angular 2 was released in 2016, there were no “Standalone Components”
Today, Standalone Components are the
recommended way of building components
But you can also still use “Module-based
Components” with Angular Modules
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Understanding Angular Modules
Angular Modules “make components (& more) available to each other”
AppModule
AppComponent
HeaderComponent UserComponent TasksComponent
TaskComponent
TasksModule
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Debugging
Understanding & Fixing Error Messages
Debugging Logical Errors
Using the Angular Developer Tools
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Essentials - Practice Project
Apply Your Knowledge & Practice What You Learned
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Exercise
Build an “Investment Calculator” Application
1
Add a “Header” component with a title & image
2
Add a “User Input” component that collects user
input with two-way-binding
3
Add an “InvestmentResults” component that
outputs results in a table
You can use signals or not
You can use standalone components or module-based components
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Components Deep Dive
Advanced Components Features & Concepts
Working with the Host Element
Inputs, Outputs & Two-Way-Binding
Interacting with Component Views & Content
Component Lifecycle
Maximilian Schwarzmüller — “Angular - The Complete Guide”
When should you split a component?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
It’s up to you!
Separation of Concerns
Every component should only do “one thing”
Maximilian Schwarzmüller — “Angular - The Complete Guide”
It’s a trade-o!
Separation of Concerns
vs
Simplicity & Code Colocation
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Enums
TypeScript Feature
Enums are “groups of allowed values”
enum ViewEncapsulation {
Emulated = 0,
None = 2,
ShadowDom = 3
}
Internally, the pre-defined allowed values (e.g., “Emulated”) map
to integers which can be used by Angular as identifiers
Maximilian Schwarzmüller — “Angular - The Complete Guide”
The Shadow DOM
A browser feature that allows you to attach hidden DOM structures to DOM elements
Example
The built-in <video> element hides a more complex
DOM tree that’s used internally
For CSS styling, the Shadow DOM can be used to scope CSS styles to that hidden
tree — instead of applying styles globally to the entire page.
Angular can emulate this Shadow DOM browser feature for its own components.
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Component Host Elements
Every Angular component has a Host Element
Example
A component with a selector of “app-header” targets an
<app-header> element which is rendered into the real DOM
Important: The elements targeted by your component selectors do NOT act
as placeholders and are NOT replaced when the page is rendered!
Instead, the selected elements are preserved and simply
“enhanced” / taken over by your component logic & markup!
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Directives Deep Dive
Directives vs Components
Attribute Directives
Structural Directives
Built-in Directives
Building Custom Directives
Maximilian Schwarzmüller — “Angular - The Complete Guide”
What are Directives?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
What are Directives?
Directives are “enhancements” for elements (built-in ones or components)
Example
<input name=“title” ngModel />
They can change the configuration (properties, attributes), styling or behavior of elements.
Unlike Components, Directives have no template!
In other words: Components are Directives with a template.
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Two Types Of Directives
Attribute Directives Structural Directives
Do not directly change the DOM structure Do directly change the DOM structure
They may change the attributes, They are applied on <ng-template>
properties or behavior of an element elements or via the * syntactic sugar
Example Example
<p [ngClass]=“{active: isActive}”>…</p> <p *ngIf=“someCondition”>…</p>
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Pipes Deep Dive
What are Pipes?
Built-in Pipes
Building Custom Pipes
Pure vs Impure Pipes
Maximilian Schwarzmüller — “Angular - The Complete Guide”
What are Pipes?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Pipes transform the
way data is displayed
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Services & Dependency Injection Deep Dive
Revisiting Services
Revisiting Dependency Injection (DI)
Hierarchical Injectors & DI Resolution Process
Injection Tokens & Values
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Understanding Services
Services allow you to share logic and data across the application
SomeService
Injected
SomeComponent OtherComponent
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Understanding Dependency Injection
You don’t create service instances yourself — instead, you request them from Angular
Platform EnvironmentInjector
Application root
ModuleInjector
EnvironmentInjector
ElementInjector
Component
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Understanding Change Detection
What is Change Detection?
Understanding Angular’s Change Detection Mechanism
Using the OnPush Strategy
Change Detection & Signals
Going Zoneless
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular’s Change Detection Mechanism
A “Zone”
Zone.js notifies Angular about user events, expired timers etc.
AppComponent Checking for changes
Checking for changes
HeaderComponent UserComponent TasksComponent
Checking for changes Checking
Checking for for changes
changes TaskComponent
User clicks button
Maximilian Schwarzmüller — “Angular - The Complete Guide”
The “OnPush” Strategy
Maximilian Schwarzmüller — “Angular - The Complete Guide”
RxJS & Observables
What are Observables?
Creating & Using Observables
Observable Operators
Observables vs Signals
Maximilian Schwarzmüller — “Angular - The Complete Guide”
What are Observables?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
It’s a concept provided
by RxJS
NOT by Angular!
Maximilian Schwarzmüller — “Angular - The Complete Guide”
A Stream Of Data
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Observables
Values over time
Signals
Values in a container
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Observables
Great for managing events & streamed data
Signals
Great for managing application state
Maximilian Schwarzmüller — “Angular - The Complete Guide”
A Stream Of Data
RxJS Observables emit values over time — you can set up subscriptions to handle them
1 2 3 4 5 6 7
Observer 1
Set up Subscriptions to listen for
values (and use them)
Observer 2
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Managing Forms
2 Ways of Handling Forms in Angular
Template-driven Forms
Reactive Forms
Managing Inputs, Values & Validation
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Two Main Ways Of Handling Forms
Template-driven Reactive
Setting up forms via component templates Setting up forms via TS code
Easy to get started Setup requires more verbose code
Implementing more complex logic & Handling more complex forms can be
forms can be tricky easier
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Template-driven Forms
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Reactive Forms
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Routing
What & Why?
Route Configuration
Nested Routes
Resolving Data & Controlling Access
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Apps are
Single Page Applications
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Yet they often consist
of multiple pages
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Angular Has Built-in Routing Support
Client-side Routing
Angular watches & manipulates the URL and renders
di!erent components for di!erent URLs
Important: It’s all happening in the browser! There’s no
server-side routing involved.
Example
/users UsersComponent
/shop ShopComponent
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Lazy Loading
What & Why?
Deferrable Views
Lazily Loaded Routes
Maximilian Schwarzmüller — “Angular - The Complete Guide”
What Is Lazy Loading?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Only load & run code
when it’s needed!
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Advantage
Smaller initial bundle size,
application is up & running quicker
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Route-based Lazy
Loading
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Deferrable Views
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Deployment
Build Options: SPA, SSR, SSG
What, Why & When?
Deployment Examples
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Deployment?
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Option 1
Single Page Applications
Build a client-side only web application
All code executes in the browser
No dynamic web server needed — a static host suffices
Potential disadvantages: Initially missing content, bad SEO
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Option 2
Server Side Rendered App
Angular app routes are rendered on-demand on a dynamic web server
Browser receives finished, rendered page
Web app is hydrated (“activated”) and becomes a SPA after initial rendering
Dynamic web server is required
Potential disadvantages: Long-taking tasks may cause empty pages, complexity
Maximilian Schwarzmüller — “Angular - The Complete Guide”
Option 3
Static Site Generation
Angular app routes are pre-rendered at build time
Browser receives finished, rendered pages
Web app is hydrated (“activated”) and becomes a SPA
Dynamic web server is required — static host suffices if ALL pages are pre-rendered
Potential disadvantages: No dynamic server-side data fetching
Maximilian Schwarzmüller — “Angular - The Complete Guide”
