The Ultimate
Guide to Angular
Evolution
How Each Angular Version Impacts Efficiency,
DX, UX and App Performance
Table of Contents
Preface ������������������������������������������������������������������������������������������������������������������������������������������ 4
Introduction ��������������������������������������������������������������������������������������������������������������������������������� 5
How this book is organized ������������������������������������������������������������������������������������������������������������������������������������������������������������ 6
Angular v14 ���������������������������������������������������������������������������������������������������������������������������������� 8
Standalone API (developer preview) ����������������������������������������������������������������������������������������������������������������������������������������9
Typed forms ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 13
Inject function ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 15
CDK Dialog and Menu ���������������������������������������������������������������������������������������������������������������������������������������������������������������������17
Setting the page title ���������������������������������������������������������������������������������������������������������������������������������������������������������������������� 18
ENVIRONMENT_INITIALIZER Injection Token �������������������������������������������������������������������������������������������������������������������������� 20
Binding to protected component members �������������������������������������������������������������������������������������������������������������������������21
Angular extended diagnostics ���������������������������������������������������������������������������������������������������������������������������������������������������22
ESM Application Build (experimental) ����������������������������������������������������������������������������������������������������������������������������������� 24
Typescript/Node�js support �������������������������������������������������������������������������������������������������������������������������������������������������������� 24
Angular v15 �������������������������������������������������������������������������������������������������������������������������������� 29
Standalone API (Stable)��������������������������������������������������������������������������������������������������������������������������������������������������������������� 30
Directive composition API ������������������������������������������������������������������������������������������������������������������������������������������������������������ 36
Image directive �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 38
MDC-based components ������������������������������������������������������������������������������������������������������������������������������������������������������������ 39
CDK Listbox �����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������40
Improved stack traces ������������������������������������������������������������������������������������������������������������������������������������������������������������������� 41
Auto-imports in language service ������������������������������������������������������������������������������������������������������������������������������������������ 43
Typescript/Node�js support �������������������������������������������������������������������������������������������������������������������������������������������������������� 44
Angular v16 �������������������������������������������������������������������������������������������������������������������������������� 47
Signals library (developer preview) ��������������������������������������������������������������������������������������������������������������������������������������� 48
SSR Hydration (developer preview) ����������������������������������������������������������������������������������������������������������������������������������������� 51
Vite-powered dev server ������������������������������������������������������������������������������������������������������������������������������������������������������������� 53
Required inputs �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 54
Input transform function �������������������������������������������������������������������������������������������������������������������������������������������������������������� 57
Router data input bindings ���������������������������������������������������������������������������������������������������������������������������������������������������������58
Injectable DestroyRef and takeUntilDestroyed ������������������������������������������������������������������������������������������������������������������60
Self-closing tags ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 62
runInInjectionContext �������������������������������������������������������������������������������������������������������������������������������������������������������������������� 63
Standalone API CLI support ��������������������������������������������������������������������������������������������������������������������������������������������������������64
Typescript/Node�js support �������������������������������������������������������������������������������������������������������������������������������������������������������� 64
Angular v17 ����������������������������������������������������������������������������������������������������������������������������������70
Signals library (stable) �������������������������������������������������������������������������������������������������������������������������������������������������������������������71
Signal inputs ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������73
New control ow (Developer preview) �����������������������������������������������������������������������������������������������������������������������������������75
Deferred loading (developer preview) ����������������������������������������������������������������������������������������������������������������������������������� 78
Inputs Binding with NgComponentOutlet ����������������������������������������������������������������������������������������������������������������������������82
Animation lazy loading �����������������������������������������������������������������������������������������������������������������������������������������������������������������83
View Transitions ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 85
Esbuild + Vite (stable) �������������������������������������������������������������������������������������������������������������������������������������������������������������������87
SSR Hydration (stable) ����������������������������������������������������������������������������������������������������������������������������������������������������������������� 88
CLI improvements ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 89
Devtools Dependency Graph ����������������������������������������������������������������������������������������������������������������������������������������������������� 90
Rebranding and introduction of angular�dev ����������������������������������������������������������������������������������������������������������������������91
Typescript/Node�js support ���������������������������������������������������������������������������������������������������������������������������������������������������������92
The future ����������������������������������������������������������������������������������������������������������������������������������� 96
Server-side rendering ������������������������������������������������������������������������������������������������������������������������������������������������������������������� 96
Change Detection and Reactivity�������������������������������������������������������������������������������������������������������������������������������������������� 96
Other changes ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 97
Overall ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������97
What the experts are saying ������������������������������������������������������������������������������������������������� 98
Importance of staying up-to-date with all the latest changes in Angular �������������������������������������������������������� 98
How do the overall changes affect the learning curve? ���������������������������������������������������������������������������������������������� 99
Expectations for the direction and pace of change in Angular ���������������������������������������������������������������������������������101
Thank You ��������������������������������������������������������������������������������������������������������������������������������� 103
Bibliography �����������������������������������������������������������������������������������������������������������������������������104
About authors ��������������������������������������������������������������������������������������������������������������������������104
Main Author ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������104
Special thanks to ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������104
Invited experts ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������105
4
The Ultimate Guide to Angular Evolution
Preface
This ebook is a combination of Angular roadmap and changelog, supplemented with
clear explanations and use cases of all relevant changes in recent years. It brings
together all the new features in one place and puts them in a broader context of
Angular’s evolution. Regardless of whether you are interested in learning about

on the framework, this text has got you covered.
5
The Ultimate Guide to Angular Evolution
Angular is gaining momentum we’ve never seen before. Since 2021, we’ve been
getting a lot of new features on a regular basis, and the pace of change is not
slowing down. This is a positive for Angular apps, but it also means you need to
dedicate an amount of time every year to keep track of these changes. It’s crucial to
stay up to date with Angular’s changes and new features in order to provide your
users with a quality, high-performing application and in-house developers with a good
developer experience.
Regularly updating the Angular version will make your application easier to maintain
thanks to features and tools that make it easier to develop, test, and improve your


user experience.
This ebook will serve as your guide to previous Angular versions, the changes and new
features they brought. As a bonus it provides expert insights and predictions of what
the framework will look like in the future.
We will be focusing on versions 14 and up. This is because the earlier period of Angular

the compiler and rendering engine to Ivy), which, at the same time, meant much less
new functionality and changes to the framework’s API. To visualize this, we can try to
divide the lifespan of Angular so far into three phases:
*Now - the time of publication, Q1 2024
Angular along with other frameworks like React and Vue, popularized sin-

versions of Angular were very thoroughly battle-tested. During that period the
limitations of the legacy build and rendering pipeline called “View Engine” were
learned. After that Angular core developers decided to completely redesign it
and gave it a new code name called “Ivy”. Complete migration took a few years

Ivy engine introduced a number of new opportunities and brought us into the 3rd
Phase, a kind of “boom” of new functionalities and long-term shifts in Angular mental
models. In the following pages, we will look at all of these in detail.
Introduction
6
The Ultimate Guide to Angular Evolution
How this book is organized
           
with version 14, up to version 17, and beyond). Sometimes, however, functionalities
were introduced between major releases or introduced gradually and improved
over several versions. While we wanted to follow the chronological order as closely
as possible, there may be some deviations that do not disrupt the broader context of
changes to the framework.
Our approach to presenting this content is systematic and reader-friendly, ensuring that
you can both grasp the technicalities and see the broader picture of each feature’s
impact. We structured all functionalities into three distinct sections:
Challenge
addresses. Understanding the challenge provides context and highlights the
significance of the feature in real-world scenarios.
Solution - Here, we delve into the technical details of the feature. We describe how it

Benets - This part showcases the advantages of using the feature. We focus on how it
contributes to business values.
To further enhance your reading and learning experience, each feature is categorized
using labels. That way, you have the option of reading this ebook cover-to-cover to get


on the features that are most pertinent to your current projects or interests.
The four labels are:
Performance enhancements in frontend development are crucial

processes. These enhancements focus on optimized JavaScript
execution, efficient resource loading, and minimized browser
reflow and repaint, resulting in quicker page loads and smoother
web element interactions. Additionally, these improvements can
streamline the development workflow and CI/CD pipeline,
enabling quicker builds, more efficient testing, and faster
 
changes in performance.
Improving developer experience can increase productivity and
code quality. When developers have better tools, processes, and
documentation, they can implement features more quickly, reliably
and in a more maintainable way. They are more motivated to work
on your project and stay in your team for a longer time. This label
Dev Experience
Performance
7
The Ultimate Guide to Angular Evolution
marks changes that have a positive impact on the developer’s
experience.
Focusing on user experience is crucial, because it leads to products
that are more intuitive, accessible and enjoyable to use. This can
increase user engagement, satisfaction and loyalty, which are
important factors for the success of any software application.
This label marks changes that improve user experience in Angular
projects.
By increasing the speed at which new features and fixes
are delivered, companies can respond more quickly to market
changes and user feedback, leading to a competitive edge and
improved customer satisfaction. This label marks changes that

We hope this book serves as a valuable resource in your journey
with Angular, whether you’re a seasoned developer or just starting
out. Happy reading, and happy coding!
UX
Efciency
Angular v14
release date: 06.2022
Standalone API
Typed Forms
Angular v14 | The Ultimate Guide to Angular Evolution
9

legacy View Engine. This change, along with aligning all internal tools with Ivy, not only

easier framework maintenance, reduced codebase complexity, and smaller bundle
sizes.


related to debugging applications, both in the CLI and in the browser.
The introduction of standalone components streamlines the development process,

         
Features like streamlined page title accessibility improve user experience and SEO, while
extended developer diagnostics offer actionable performance insights. With support for
the latest TypeScript and ECMAScript standards, Angular 14 provides developers with

Standalone API (developer preview)
Challenge:
Although ECMAScript has a native module system supported in all modern browsers,
Angular delivers its own module system, which is based on NgModules.
NgModule is a structure that describes how to create an injector and how to compile

pipes, and service providers that will be added to the application dependency injectors.
The goals of NgModules are to organize the application and extend it with capabilities
from external libraries.
This solution was met with some criticism from the beginning, because it was considered
too complicated and illegible. The complex connections between modules and their
providers, unclear dependencies between components, and unclear NullInjectorErrors
were some of the reasons a simplified alternative needed to be provided.
Solution:

full backward compatibility. Creating components, directives and pipes as standalone
is possible by setting the “standalone” flag to true in their decorators.
Dev Experience
EfciencyPerformance
Angular v14 | The Ultimate Guide to Angular Evolution
10
//in module
@NgModule
imports: [FooterComponent],
})
export class Module
//in component
@Component
selector: main,
template: ‘<ng-content></ng-content>’,
standalone: true,
imports: [FooterComponent ]
})
export class Component
//routing
export const ADMIN_ROUTES: Route[] = [
path:footer’, component: FooterComponent}
];
Standalone components can be imported by another standalone component or
module or used within a routing declaration.
This transition makes components, directives and pipes self-contained. NgModule is no
longer the smallest building reusable block. This results in many positive outcomes,
including:

reused independently,
reading components is much easier, as the reader doesn’t have to track
a component’s module to understand its dependencies,
tracking implicit dependencies on NgModules context is very costly for tools and
makes it difficult to optimize generated code. With the standalone API the tools can
be optimized,
@Component
selector: ‘footer’,
template: ‘<ng-content></ng-content>’,
standalone: true,
})
export class FooterComponent 
Angular v14 | The Ultimate Guide to Angular Evolution
11
importComponent, bootstrapComponent } from @angular/core;
@Component
selector: ‘my-app’,
standalone: true,
template: ‘<h1>Hi there!</h1>’,
})
export class AppComponent
bootstrapComponentAppComponent);
RouterModule.forRoot

path: ‘/path/to/standalone/component’,
loadComponent=> import‘./default-standalone.cmp’)
}
]);
const TestBed.createStandaloneComponentMyComponent
How does it affect the routing? The new API allows to lazy load standalone paths
directly, with no need for NgModule:
There is also no need for NgModule while testing standalone components. This is how
the test case can look like
At this point, in developer preview mode, the change is not production-ready. It has some

presents a major mental model change that turns standalone components into basic
building blocks of an application.
the API for dynamic loading and rendering components is simpler, since we
no longer have to care about a component’s module when using ViewContainer-

Angular’s main ApplicationModule is no exception. It also became optional, making it
possible to bootstrap application directly with a standalone component using the
bootstrapComponent function:
Angular v14 | The Ultimate Guide to Angular Evolution
12
The Angular Core Team also made sure that everything was compatible with the existing
module-based ecosystem, meaning all existing libraries should work as-is.
Benets:
This revolution boosts the developer experience by:
• reducing boilerplate,

• removing the whole concept of an extra module system based on NgModules,
• improving compilation time, and
• lowering the entry barrier for novice developers.
  

Standalone API becomes Stable.
Expert Opinion:
Standalone APIs will make the authoring and building of Angular apps much
simpler, especially for beginners to the Angular framework. The concept of Angular
modules had been complex to explain and many developers who wanted to learn
Angular were confused. Thankfully Standalone APIs will change that.
~ Aristeidis Bampakos
Google Developer Expert
From my perspective, the introduction of the Standalone API has signicantly simplied
the learning curve for Angular. In the past, learners had to grapple with understanding
the complex NgModule relationships, including figuring out what to export, where to
import, and dealing with the intricacies of eager and lazy-loaded routing. Standalone API,
however, empowers developers to concentrate solely on the component they are
working on, without the need to concern themselves with the intricacies of the NgModule.
The extension of this approach to Pipes and Directives is like the icing on the cake.
Furthermore, Angular CLI provides support for creating projects with a focus on the
standalone component-based approach, which is a valuable feature. There are also
several open-source libraries available to facilitate the migration of applications from
NgModule-based architecture to a standalone component-based one, making
this transition smoother and more accessible.
~ Balram Chavan
Google Developer Expert
Standalone APIs introduced an important shift towards simplifying application
development in Angular. They are the basis for many powerful features that have
been introduced recently.
~ Marko Stanimirović
Google Developer Expert
Angular v14 | The Ultimate Guide to Angular Evolution
13
Typed forms
Challenge:
          
FormControl, FormArray, etc.) included the usage of “any” type. This resulted in poor
type safety, bad support for coding tools, codebase inconsistency and problematic
refactoring.
Solution:
In response to the challenges mentioned above, the Angular Team introduced Typed
Forms. Existing reactive forms were extended to include generic types to enforce type
safety for form controls, groups, and arrays. By applying types, you can catch potential
errors at compile time, making your codebase more robust and maintainable.
Example of reactive control with a generic type:

don’t pass an argument, it will change the value to null. However, it’s possible to change

const nameFormControl = new FormControl<string‘’);
// type of nameFormControl.value is string | null
Dev Experience
const nameFormControl = new FormControl<string‘’true });
// type of nameFormControl.value is string
nameFormControl.reset
// reset method will change value to empty string
Things get more interesting when we inspect the behavior of complex controls, like

Angular v14 | The Ultimate Guide to Angular Evolution
14
The possibly undefined type comes from the fact that name control might be

For the use cases where we don’t know all control keys beforehand, like when controls are
added dynamically, the Angular Team added the new FormRecord class.
Migrating to Angular 14 will not break any existing untyped forms, because all
occurrences of forms classes will be automatically replaced by their untyped versions:
const myForm = new 
name: new FormControl‘’true }),
});


const myForm = new FormRecord<FormControl<string
myForm.addControl‘foo’, new FormControl<string‘bar’true
}));

const login = new 
email: new UntypedFormControl‘’),
password: new UntypedFormControl‘’),
});
You can incrementally migrate to Typed Forms by removing the “Untyped” prefix
in your application.
Benets:
Leveraging TypedForms in Angular:
Leads to more readable, maintainable, and reliable code: this feature

and improved IDE support for autocompletion and error detection. Discrepancies in
data types or structures are caught early, and refactoring becomes safer and more
straightforward.
Angular v14 | The Ultimate Guide to Angular Evolution
15
Inject function
Challenge:
So far, when it comes to dependency injection, we have been limited to injections through
 

example, classes required a knowledge of how to create their dependencies instead of
focusing purely on their main responsibilities.
Solution:
The ‘inject’ utility function allows us to retrieve an instance of dependency from the
Angular Dependency Injection System outside of a class constructor. This function
has to be called in an injection context, that is one of the following:
a constructor of the component, directive, pipe, injectable service or NgModule,


an InjectionToken’s factory, or
a function within a stack frame that is run in an injection context.
Let’s take a look at an example of usages inside a component:
@Component
class HomeComponent
private readonly dependencyA: DependencyA;
private readonly dependencyB: DependencyBDependencyB);
constructor
this.dependencyA = injectDependencyA);
}
}
Dev Experience
Efciency
When you want to verify if you’re in an injection context, you can use a helper function
called assertInInjectionContext:
Facilitates cleaner, more concise code and streamline validation processes,
aligning well with Angular’s design philosophy for a more cohesive development experience.
Angular v14 | The Ultimate Guide to Angular Evolution
16
This feature allows us to create many reusable DI-dependent functions like the following:
function getServiceFooService
assertInInjectionContextgetService);
return injectFooService);
}
function getProductIdObservable<string
return injectActivatedRoute).paramMap.pipe
mapparams) => params.getproductId’))
);
}
@Component
class ProductDetails
private readonly productId$ = getProductId
...
}
Benets:
The inject function in Angular:
Provides flexibility: allows developers to access service instances and other
dependencies outside of class constructors, making code more modular and testable.
Streamlines the process of dependency retrieval: promotes cleaner and more
maintainable code by abstracting the complexity of dependency management and
injection.
Angular v14 | The Ultimate Guide to Angular Evolution
17
CDK Dialog and Menu
Challenge:
Before the introduction of the CDK, styling certain components available in Angular
Material was difficult due to their ready-made design.In such a situation, it was
necessary to overwrite the styles of a given component, which could be problematic.
Solution:
Thanks to the CDK, it is possible to create unstyled dialogs and menus and customize
them by ourselves.
Open dialog is called by an open method with a component or with a TemplateRef
representing the dialog content and returns a DialogRef instance.
const dialogRef = dialog.openDialogComponent
height: ‘300px’,
width: ,
panelClass: ‘empty-dialog’,
});
Dev Experience
Efciency UX
cdkMenu from CdkMenuModule provides directives to create custom menu interactions

made classes from directives to make it easier to add custom styles.
A typical menu consists directives:
cdkMenuTriggerFor - trigger element to open ng-template with menu
cdkMenu - create menu content after click on the trigger
cdkMenuItem - create and add item to menu
<button [cdkMenuTriggerFor]=”menu”>Open menu</button>
<ng-template #menu>
<div cdkMenu>
<button cdkMenuItem>Item 1</button>
<button cdkMenuItem>Item </button>
<button cdkMenuItem>Item 3</button>
</div>
</ng-template>
Angular v14 | The Ultimate Guide to Angular Evolution
18
Benets:
Angular CDK:
Provides a set of tools to build feature-packed and high-quality Angular components.
Simplies common pattern and behavior implementation.
Setting the page title
Challenge:
Angular provides a Title service that allows modifying the title of a current HTML document.
To use it, you have to inject it. It is completely independent from routing, so any linking to

Solution:
Angular 14 offers a new feature - TitleStrategy - to set unique page titles using the new
Route.title property in the Angular Router. The title property takes over the title of the
page after routing navigation.
export const routes: Routes = [

path: ‘home’,
title: ‘Home Page’,
loadComponent:=>
import‘./home/home.component’).thenm) => m.HomeComponent),
}
];
It is also possible to provide a custom TitleStrategy to apply more complex logic behind
a page title.
Dev Experience
Efciency
Angular v14 | The Ultimate Guide to Angular Evolution
19
const routes: Routes
path: ‘home’,
component: HomeComponent

path: ‘about’,
component: AboutComponent,
title: ‘About Me’ // <-- Page title
}];
@Injectable
export class TemplatePageTitleStrategy extends TitleStrategy
constructorprivate readonly title: Title
super
}
override updateTitlerouterState: RouterStateSnapshot
const title = this.buildTitlerouterState);
if
this.title.setTitle - title});


}
}
}
@NgModule
TitleStrategy, useClass: TemplatePageTitleStrategy}]
})

Benets:
This feature is:
A new convenient way for manipulating a page title: with no dependency injection
and reactivity overhead.
Angular v14 | The Ultimate Guide to Angular Evolution
20
@NgModule
export class LazyModule
constructor 
.init
}
}
But in the absence of NgModules, some Standalone API counterpart was needed.
Solution:
The Environment injector is a more generalized version of the module injector,
introduced together with Standalone APIs in Angular v14. ENVIRONMENT_INITIALIZER
is a token for initialization functions that will run during the construction time of an
environment injector.
When we navigate to a lazy loaded route, a new environment injector is also created for
that route. Then we can provide ENVIRONMENT_INITIALIZER functions that will be executed

and perform any logic you need when the application is bootstrapped or lazy loaded
content is instantiated.
Initialization functions on a standalone application bootstrap:
bootstrapApplicationAppComponent
providers: [

provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue=> inject).init
},
],
});
ENVIRONMENT_INITIALIZER Injection Token
Challenge:
It was possible to use a class with NgModule decorator to run initialization logic, i.e.:
Dev Experience
Efciency
Angular v14 | The Ultimate Guide to Angular Evolution
21
Benets:
This Injection token:
Increases efciency: we can place our initialization logic for the entire application

NgModules.
Improves developer experience: this part of the process is now more clear and
convenient to carry out.
export const lazyRoutes: Routes = [

path: ‘’,
component: FooComponent,
providers: [

provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue=> injectBarService).activate
},
],
},
];
Binding to protected component members
Challenge:
Only public members of component were accessible in its component template. It meant
that every binding in the template was also a part of the component’s public API.
Component classes exposed too much and violated encapsulation.
Component’s public API is relevant when we reference components programmatically,
i.e. via ViewChild decorator:
@ViewChildMyComponent) myComponent: MyComponent;
Dev Experience
Initialization functions on lazy loaded routes:
Angular v14 | The Ultimate Guide to Angular Evolution
22
Benets:
With this change, we get:
An improved developer experience: the overall encapsulation is improved. We

template but don’t want to expose them anywhere else.
Angular extended diagnostics
Challenge:
Sometimes in the Angular codebase, there are potential anomalies that are not
straightforward bugs. For example, when they don’t cause a compilation error and
meet all syntax requirements. At the same time, objections might occur, and they
might not necessarily reflect what the programmer had in mind.
Let’s take a look at the following example:
@Component
selector: ‘my-component’,
template: message }}, // Now compiles!
})
export class MyComponent
protected message: string = ‘Hello world’;
}
<componentfoo])=”bar”></component>
This is a valid Angular example, but it is not a standard two-way data binding. Instead, it

binding looks like this:
Solution:

Dev Experience
Efciency
Angular v14 | The Ultimate Guide to Angular Evolution
23
Solution:
Angular 13.2.0 brought us a new functionality called Extended Diagnostics. It’s a tool

itself), and it doesn’t require any additional infrastructure or scripts. – It simply works
out of the box, and with the ng serve during the transpilation process.
Its task is to detect potential anomalies just like the one mentioned above. It serves
as a kind of additional linter for angular view template syntax. We enable it inside the


angularCompilerOptions
strictTemplates: true,
extendedDiagnostics
checks
invalidBananaInBox: error
},
defaultCategory: error
}
}
           
https://angular.io/extended-diagnostics. The Angular Team plans to add new
diagnostics in minor releases of the framework. New diagnostics and new bugs may
appear along with version upgrades, so by default, detected anomalies are returned
as warnings. This can be controlled with the “angularCompilerOptions.extended-

Ideas for new diagnostics can be submitted via the github feature requests:
https://github.com/angular/angular/issues/new?template=2-feature-request.yaml
Benets:
These extended diagnostics result in:
Improved code security and reliability: with no extra effort and/or cost.
<component [foo)]=”bar”></component>
Angular v14 | The Ultimate Guide to Angular Evolution
24
 
language that’s designed for modern web development. It supports heavy parallel
processing and might significantly outperform competitors such as Webpack. Its
support in Angular framework will be developed in the upcoming releases.
Benets:
Introducing a new esbuild-based build system is:
A step towards faster build-time performance: including both initial builds and
incremental builds.
An opening to new tools: thanks to ESM, which includes dynamic import
expressions for lazy module loading support.
Typescript/Node�js support
Support for Node.js v12 and Typescript older than 4.6 has been removed. Angular 14
supports TS v4.7 and targets ES2020 by default, meaning initial bundle size is reduced.
Here are the new feature examples in the now-supported Typescript:
ESM Application Build (experimental)
Challenge:
The standard Angular bundler is considered quite slow by developers. The Angular Team
tested various other approaches that can speed up the package-building process.
Solution:
Angular version 14 introduces an experimental feature that leverages the esbuild-based
build system for the “ng build” command. This experimental build system compiles pure


Performance
builder: @angular-devkit/build-angular:browser-esbuild
Dev Experience
Angular v14 | The Ultimate Guide to Angular Evolution
25
Enhanced Awaited type (available in 4�5)
Template string types as discriminants (available in 4�5)
Dev Experience
Dev Experience
Challenge:
Developers who frequently work with Promises, especially with async/await syntax,
sometimes want to explicitly describe the type of value returned by the resolved
Promise. For regular synchronous functions, there is the ReturnType<FnType> utility, but

Solution:
            
promise-like “thenables” without relying on PromiseLike, and it does it recursively.
Challenge:
TypeScript could not correctly use template string types to narrow the type in
discriminated unions. In such cases, the exact type could not be inferred therefore,
typing support was limited.
Benets:
Extra explicit typing of async functions:
Positively affects the type-safeness, and
Improves code readability�
// Name = string
type Name = Awaited<Promise<string>>;
// Age = number
type Age = Awaited<Promise<Promise<number>>>;
// Foo = boolean | number
type Foo = Awaited<boolean | Promise<number>>;
Angular v14 | The Ultimate Guide to Angular Evolution
26
Solution:
With this feature, Typescript is now able to use template string literals as discriminants.
The following example used to fail, but now successfully type-checks:
Benefits:
This change brings:
More exibility:by TypeScript
transpiler.
export interface Success
type: $string}Success;
body: string;
}
export interface
type: $string}Error;
message: string
}
export function handlerr: Success | Error
HttpSuccess
const token = r.body; // correct!
}
}
Control Flow Analysis for Destructured Discriminated Unions
(Available in 4�6)
Dev Experience
Challenge:
If we had a discriminated union and we tried to destructure it, we could no longer narrow
its members using discriminator property.
Solution:
Since TypeScript version 4.6, it is possible to narrow destructed discriminated object
properties. The following example explains such a case:
Angular v14 | The Ultimate Guide to Angular Evolution
27
type Action =
NumberContents; payload: number }
StringContents; payload: string };
function processActionaction: Action
constaction;
ifNumberContents
// payloadis narrowed to number
let num = payload * 2;
// ...
} else ifStringContents
// payload is narrowed to string
const str = payload.trim
// ...
}
}
Benefits:
We gain more flexibility when using and mixing discriminated unions and object
destruction.
Allows code in Constructors before super() (Available in 4�6)
Dev Experience
Challenge:
           
TypeScript also has this rule, although it used to be excessively strict in ensuring it. In
TypeScript, it used to be considered an error to have any code at the start of a constructor
if the class containing it had any property initializers.
Solution:
From now on we can place a code inside the constructor, before calling 

Angular v14 | The Ultimate Guide to Angular Evolution
28
class Base
// ...
}
class Derived extends Base
someProperty = true;
constructor
doSomeStuff// do any logic, but don’t refer ‘this’ yet
super
}
}
Benets:
The unnecessary limitation has been removed and the transpiler still validates the code
correctly, giving more freedom to the programmer.
Angular v15
release date: 11.2022
Standalone API
Directive Composition API
Image Directive
30
Angular v15 | The Ultimate Guide to Angular Evolution

enhancing developer experience and optimizing performance. Standalone APIs are now
stable, supporting simpler development practices and ensuring compatibility with core
         
APIs for Router and HttpClient and an ngSrc image directive for smarter data fetching
and improved performance.
Standalone API (Stable)
Challenge:

in the Angular 14 chapter. The solution at that time had disadvantages related to not
being in a stable version, as well as shortcomings regarding providers, adapting many

Solution:

become stable. Thanks to this, we get the green light to safely utilize them in our
applications, including production.
Let’s explore the major changes around Angular Routing. First, we received a new type
of guard – canMatch. So what’s the difference between this new one, canLoad, which tells
us whether we can load a route that references a lazily loaded module, and canActivate/
canActivateChild, which tells us whether we can activate a child route/route? CanMatch
works, in a sense, at a different, “earlier” stage and decides whether the current url can
be matched against a given route. This means it can play a similar role to both canLoad


This means we gain a new possibility – defining a route with the same path, but
navigating to different places based on the logic implemented by the guard. This is
useful, for example, when handling different user roles, or conditionally loading another

Dev Experience
EfciencyPerformance
31
Angular v15 | The Ultimate Guide to Angular Evolution
class CanMatchSettings implements CanMatch
constructorprivate currentUser: User
canMatchroute: Route, segments: UrlSegment[]): boolean
return this.currentUser.isAdmin;
}
}
const routes: Routes = [

path: settings,
canMatch: [CanMatchSettings],
loadComponent:=>
import./admin-settings/admin-settings.component).then
v) => v.AdminSettingsComponent
),
},

path: settings,
loadComponent: =>
import./user-settings/user-settings.component
v) => v.UserSettingsComponent
),
},
];
The Router API has been fully adjusted to the standalone approach, so we no longer need
to use the Router Module. Instead, we get a whole set of alternative APIs, which also have
the advantage of being easily treeshakeable:
const routes: Routes = [...];
bootstrapApplicationAppComponent
providers: [
provideRouter
routes,
withDebugTracing
withPreloadingPreloadAllModules)
),
],
});
32
Angular v15 | The Ultimate Guide to Angular Evolution
Another new feature is support for functional guards and resolvers. This means that it
is possible to implement them in the form of plain functions, so we can say goodbye to
the classes being the only option here. The introduction of this concept triggered
many reactions among the community, both positive and negative. Some developers
see this as a new direction of the framework. Personal preferences aside, one thing
cannot be denied – it requires much less boilerplate. What is more, it is now very easy

of the guard based on that. A usage example, which you can easily compare with the
earlier example, looks as follows:
A small, but lovely, improvement also appeared in the syntax for importing lazy-loaded

const routes: Routes = [
path: settings,
=> inject
loadComponent:=>
import./admin-settings/admin-settings.component).then
v) => v.AdminSettingsComponent
),
},

path: settings,
loadComponent:=>
import./user-settings/user-settings.component).then
v) => v.UserSettingsComponent
),
},
];
@Component
standalone: true,
...
})
export default class MyComponent
path: home,
=> import./my-component),
}
33
Angular v15 | The Ultimate Guide to Angular Evolution
Every lazy-loaded route creates a separate injector, just like every lazy loaded ngModule
created its own injector. The counterpart of the “providers” array in the NgModule

Providers declared in the route are available for the component declared at the same
level and for all its descendants.
Similarly to Router, HttpClient has also been adapted to the module-less approach:
path: admin,
providers: [AdminService],
children: [
users, component: AdminUsersCmp},
teams, component: AdminTeamsCmp},
],
}
bootstrapApplicationAppComponent
providers: [
provideHttpClient

cookieName: MY-XSRF-TOKEN,
headerName: X-MY-XSRF-TOKEN,
})
),
],
});
34
Angular v15 | The Ultimate Guide to Angular Evolution
The transition to Standalone API also affected Angular interceptors:
During migration to functional interceptors, you can still use your class-based interceptors

follows:
If in your standalone app, you need any providers from third-party libraries that are
available only inside NgModules, you can use the importProvidersFrom utility function:
bootstrapApplicationAppComponent
providers: [
provideHttpClient
withInterceptors
request, next) =>
consoleUrl: , request.urlWithParams);
return nextrequest);
},
])
),
],
bootstrapApplicationAppComponent
providers: [


provide: HTTP_INTERCEPTORS,
useClass: YourClassBasedHttpInterceptor,
multi: true,
},
],
});
bootstrapApplicationAppComponent
providers: [importProvidersFromMatDialogModule)],
});
35
Angular v15 | The Ultimate Guide to Angular Evolution

creation of dynamic components that are self-contained and no longer need their
Ngmodules.
@Component
export class MyComponent
constructorprivate readonly viewContainerRef: ViewContainerRef
createvoid
this.viewContainerRef.createComponentOtherComponent);
}
}
Benets:
The proposed module-less approach:
Simplies the process of application development: reduces the reliance on
NgModules and minimizes boilerplate code.
Enables faster development cycles and a cleaner codebase: provides a more
direct and streamlined API for key aspects like bootstrapping, routing, and dynamic
component instantiation.
Improves app performance: thanks to the shift towards a providers-first
approach, which enhances tree-shakability.
Expert Opinion:
The standalone API makes many things easier. Especially since you now have to provide
everything you need in one component, and it does not magically come from somewhere.
This makes the topic of DependencyInjection much easier to understand. This also made
the lazy loading of components possible. My tip for this: Declare the component class as
a default export so that you don’t have to resolve the promise yourself during lazy load-
ing. This makes the dynamic import shorter.
~ David Muellerchen
Google Developer Expert
36
Angular v15 | The Ultimate Guide to Angular Evolution
Directive composition API
Challenge:
One of the most wanted features in the framework was the ability to reuse directives
and apply their behavior to other directives or components.
Up to this point, there have been few possibilities to partially achieve a similar result,
such as the use of inheritance, where the main limitation is that only one base class
can be used.
Another idea used, for example, by Angular Material, is the use of TypeScript mixins. But

implementation and doesn’t allow for the use of Angular APIs in mixins.
Solution:
The Directive Composition API in Angular is a feature that allows directives to be
applied to a different directive or a component’s host element directly from within
the component’s TypeScript class. The only major restriction is that only standalone
directives can be applied to our directives/components, which on the other hand,
don’t need to be standalone.
Dev Experience
Efciency
@Component
selector: my-component,
templateUrl: ./my-component.html,
hostDirectives: [

directive: NgClass,
},

directive: CdkDrag,
inputs: [data],
outputs: [moved: dragged],
},
],
standalone: true,
})
export class MyComponent
37
Angular v15 | The Ultimate Guide to Angular Evolution
The above piece of code applies the NgClass and CdkDrag directives to our component.

the template where our component is used. The second, on the other hand, exposes both

could look as follows:
But can we control the behavior of applied directives from inside the component? This is
possible using the inject function, which allows us to inject the instance of the directive
into the component and manipulate its properties. It looks like this:
Benets:
Directive Composition API:
Improves the developer experience: enhances code modularity by allowing
developers to encapsulate and reuse behaviors across different components and
directives.
Leads to a cleaner and more organized codebase
Makes the maintenance and updating of the application more efcient.
<my-component [data]=myDatadragged)=onDragged$event)>
</my-component>
@Component
selector: my-component,
templateUrl: ./my-component.html,
hostDirectives: [

directive: NgClass,
},
],
standalone: true,
})
export class MyComponent
private ngClassDirective = injectNgClass);
someCallbackvoid
this.ngClassDirective.ngClass =my-class;
}
}
38
Angular v15 | The Ultimate Guide to Angular Evolution
Simplies the implementation process: it applies directives directly to the host

and boilerplate code in the templates.
Image directive
Challenge:
The app may take a long time to load in the browser due to the way images are loaded.
This can be especially noticeable when the website contains a lot of multimedia.
Solution:
In collaboration with the Aurora team, the Angular team has introduced the
NgOptimizedImage to enhance image optimization and incorporate best practices
for image loading performance. It is a standalone directive designed to boost

To activate iNgOptimizedImage, simply replace the image’s src attribute with ngSrc.
If the LCP image is shown, a good way to prioritize its loading is to use property called
“priority”.
Thank for that ‘priority’ applies three optimizations:
Sets fetchpriority=high - gets resources in the optimal order and prioritizes the image
Sets loading=eager - lazy-loading images
Automatically generates a preload link element if it uses SSR.
NgOptimizedImage requires us to specify a height and width for the image or attribute
‘fill’ to prevent image-related layout changes. But if the ‘fill’ attribute is used, it’s

images, it is possible to compress images and convert them on demand to formats such
Efciency UX
Performance
<img ngSrc=cat.jpg>
<img ngSrc=cat.jpgpriority>
39
Angular v15 | The Ultimate Guide to Angular Evolution
MDC-based components
Challenge:
The current version of the Angular Material library was loosely linked to the official
Material Design specification. All the styles and behaviors were reinterpreted and
reimplemented to Angular style. With the arrival of Material Design Components for Web


colors, fonts and measurements.
Solution:
           nents
are now being refactored to be based on Material Design Components for Web
 
and even complete rewrites for some. Components like form-field, chips, slider and
list have significant changes in their APIs to integrate with MDC. There are library-wide
changes affecting component size, color, spacing, shadows and animations to improve
spec-compliance and accessibility. Theming changes include updates to default
typography levels and themeable density. Each component has specific changes,

Benets:
These changes offer several benefits, such as:
Improved accessibility
Better adherence to the Material Design spec
Faster adoption of future Material Design versions: due to shared infrastructure
UX
Dev Experience
as WebP or AVIF.
The NgOptimizedImage image directive also offers other solutions to improve
application performance when loading images such as:
supporting resource hints - preloading critical assets
possibility to preload the resource for all routes instead of manual addition of
preload resource hint.
Benets:
Using the NgOptimizedImage directive and ngSrc attribute is very simple, almost
    
web vitals.
Efciency
40
Angular v15 | The Ultimate Guide to Angular Evolution
CDK Listbox
Challenge:
Creating a typical listbox with accessibility support, keyboard events support,
multiselection and correct scroll behavior, as well as satisfying WAI ARIA listbox pattern
requirements is a time-consuming task.
Solution:
The newly added component to the Angular CDK library meets all the above guidelines
while being a fully customizable solution.
UX
Dev Experience
Efciency
Appointment Time
Fri, 20 Oct, 12:00
Fri, 20 Oct, 13:00
Fri, 20 Oct, 14:00

The code example:
<label class=example-listbox-labelid=example-appointment-label>
Appointment Time
</label>
<ul cdkListbox
[cdkListboxValue]=appointment
[cdkListboxCompareWith]=compareDate
cdkListboxValueChange)=appointment = $event.value
aria-labelledby=example-appointment-label
class=example-listbox>
<li *ngFor=let time of slots
[cdkOption]=time
class=example-option>
formatTimetime)}}
</li>
41
Angular v15 | The Ultimate Guide to Angular Evolution
Benets:
Using a ready-to-use, safe, tested and trustworthy solution with WAI ARIA standards
directly from the creators of Angular saves developers a significant amount of time.
Improved stack traces
Challenge:
Up until now, the stack traces presented in CLI and browser devtools were quite obscured

the execution order when the trace included many lines from outside the code written by
the programmer.
Solution:
Improvements in this area are possible thanks to the cooperation of the Angular Team
and the Chrome team. The goal was to mark scripts as “external” and thus exclude them

contents of the node_modules and webpack folders are marked in this way. It is worth
mentioning that this mechanism is available to all developers, so authors of other
frameworks can use it as well.
The result is a stack trace that omits scripts that are probably not in the developer’s area
of interest when an error is shown in the console. Also, the code that belongs to excluded
scripts is skipped when you’re debugging and iterating over subsequent instructions in
the code.
Dev Experience
GET http://localhost:4200/random-number 404 (Not Found) app.component . ts:27
(anonymous)
Zone - setTimeout (async)
(anonymous)
timeout
(anonymous)
Zone - Promise�then (async)
(anonymous)
increment
AppComponent_Template_app_button_handleClick_3_listener
onClick
ButtonComponent_Template_input_click_0_listener
Zone - HTMLInputElement�addEventListener : click (async)
ButtonComponent_Template
Promise�then (async)
4431
__webpack_exec__
(anonymous)
(anonymous)
(anonymous)
Show 229 more frames
@ app.component . ts:27
@ app.component . ts:4
@ app.component . ts:4
@ app.component . ts:22
@ app.component . ts:22
@ app.component . ts:38
@ app.component . ts:12
@ button.component . ts:18
@ button.component . html:1
@ button.component . html:1
@ main . ts: 7
@ main . ts: 8
@ main . ts: 8
@ main . ts: 8
@ main . ts: 2
42
Angular v15 | The Ultimate Guide to Angular Evolution
The second new feature worth mentioning is stack trace linking for asynchronous
operations. The code executed following the completion of an asynchronous action can

server). This is possible thanks to the introduction of the so-called Async Stack Tagging
API mechanism in Chrome.
Call Stack
Show ignore - listed frames

Promise�then (async)

Zen - setTimeout (async)

Zone - Promise�then (async)

app.component.ts:36
app.component.ts:27
app.component.ts:4
app.component.ts:4
app.component.ts:22
app.component.ts:22
app.component.ts:38
app.component.ts:12
app.component.ts:18
app.component.ts:1
app.component.ts:1

increment
onClick
ButtonComponent_Template
ButtonComponent_Template_input_click_0_listener
Zone - HTMLInputElement�addEventListener:click (async)
AppComponent_Template_app_button_handleclick_3_listener
timeout
Benets:
Both sync and async traces have readable form and provide more information to the
programmer. Therefore these improvements:
Boost developer experience
Ease the debugging process
43
Angular v15 | The Ultimate Guide to Angular Evolution
Auto-imports in language service
Challenge:
With Standalone API, we frequently need to add extra imports to the Component
metadata, because the only components, directives and pipes available in the
template are ones we explicitly imported.
Solution:
The Angular Language Service is a tool utilized by all code editors to enhance errors, hints
and navigation between Angular templates. The new DX-related improvement,
a part of language service, allows us to automatically import components whose
selectors were used in another component’s template. This applies to both
standalone and module-based components.
Dev Experience
Efciency
import Component, NgModule } from ‘@angular/core’;
import BrowserModule } from ‘@angular/platform-browser’;
@Component
selector: ‘app-root’,
template: ‘<app-foo></app-foo>’,
styleUrls: [‘./app
})
export class AppComp
title = ‘tour - of - k
}
Quick Fix...
Extract...

Import FooModule from ‘./foo/foo.module’ on AppModule
Benets:
This tool is utilized by IDEs, and it significantly simplifies and speeds up the import
of components, directives and pipes using keyboard shortcuts, enabling the
programmer to focus on other tasks.
44
Angular v15 | The Ultimate Guide to Angular Evolution
Typescript/Node�js support
            

other things, a number of performance improvements that can reduce build and hot
reload times of TypeScript projects by up to 40%. Let’s take a look at other new features
worth mentioning.
The satises Operator (available in 4.9)
Dev Experience
Challenge:

In the example above, the typeof “name” property is not narrowed to const literal ”John”
but generalized to any string value. In some cases, we would like to ensure that

same time.
Solution:

the type of an expression matches a type without changing the resulting type of that
expression.
constJohn };

45
Angular v15 | The Ultimate Guide to Angular Evolution
type Colors = red | green | blue;
// Ensure that we have exactly the keys from ‘Colors’.
const
red: yes,
green: false,
blue: maybe,
orange: false,
// error - “orange” is not part of “Colors” union type
}  Record<Colors, unknown>;
/**
* typeof myColors is not Record<Colors, unknown>

* All the information about the ‘red’, ‘green’, and ‘blue’
* properties are retained.
*/
constboolean = myColors.green;

This operator can be combined with “as const” to infer type from constant values and
check them against a broader type at the same time:
In the example above, expression is type-checked with the satisfies operator, but
the inherited type for friends const comes directly from the value.
Satisfies is somewhat similar to “as” operator. The difference is that with “as,”
the programmer is responsible for the type safety and with “satisfies”, TypeScript
validates the type we assert automatically.
const friends = [
John },
Paul },
] as const  readonlystring }[];
46
Angular v15 | The Ultimate Guide to Angular Evolution
type Red = red;
const x: Red = blue as Red;
// everything ok
const y: Red = blue  Red;
// error: Type ‘”blue”’ does not satisfy the expected type ‘”red”’
function validatesomeValue: number
return someValue !== NaN;
// ~~~~~~~~~~~~~~~~~
// error: This condition will always return ‘true’.

}
Benets:
The new operator improves the TypeScript developer experience as it enforces

“as” operator with “satisfies,” we also reduce the reliance on untrustworthy type
assertions. The code readability is also improved in some cases.
Benets:
Thanks to the new restriction, we avoid an obvious error and are clearly informed
about an error.
Checks For Equality on NaN (available in 4�9)
Dev Experience
Challenge:
           
equal to NaN, the“not a number” value. However, it is a common mistake to check it with
someValue === NaN, instead of using the built-in Number.isNaN function.
Solution:
Typescript no longer allows direct comparisons against NaN and suggests Number.is-
NaN instead:
Angular v16
release date: 05.2023
Signals
Non-destructive Hydration
Esbuild
48
Angular v16 | The Ultimate Guide to Angular Evolution
Angular version 16 brings substantial advancements, focusing on creating a more


for advanced hydration scenarios crucial for public web platforms.
Enhancements in development ease are achieved through mandatory inputs, routing
parameter bindings and the new DestroyRef. Furthermore, the Angular CLI now supports
creating applications with standalone components, and the experimental esbuild-based
builder offers a substantial speed boost in application building.
Signals library (developer preview)
Challenge:

mechanisms, resulting in an excessive number of computations to determine what has
changed in the application state. Additionally, developers might struggle with a more

within the application, making it harder to write, maintain, and optimize their code

Solution:
In Angular 16, we received a developer preview of a brand new library containing
a primitive that represents a reactive value–the Angular signals library.

dependencies between them within an application. Unlike RxJS, observables that push
changes through a stream of values, signals allow for a more direct and straightforward
way to declare reactive state, compute derived values and handle side-effects, offering
a different approach to managing reactivity in Angular applications.
             

type of value, ranging from simple primitives like numbers and strings, to more complex
data structures such as objects or arrays.
Here are a few reasons behind Angular signals implementation:
Angular can keep track of which signals are read in the view. This lets you know
which components need to be refreshed due to a change in state.
The ability to synchronously read a value that is always available.
Reading a value does not trigger side effects.
Dev Experience
EfciencyPerformance
49
Angular v16 | The Ultimate Guide to Angular Evolution
No glitches that would cause inconsistencies in reading the state.
Automatic and dynamic dependency tracking, and thus no explicit subscriptions.
That frees us from having to manage them to avoid memory leaks.
The possibility to use signals outside of components, which works well with the
Dependency Injection.
The ability to write code in a declarative way.


their values directly. ‘fullName’ is a readonly signal that depends on the other signals and
is recalculated every time any dependent signal changes its value.

outside its local context, such as sending an http request or synchronizing two
independent data models. To create an effect we can use “effect” function:
The Angular Team also provides a bridge between signals and RxJS, placed in the
@angular/core/rxjs-interop library. It is possible to convert a signal to observable and an
observable to a signal.
@Component
export class App
signalAsh);
lastName = signalKetchum);
fullName = computed=> .)});
setNamenewName: string): void
thissetnewName);
}
}
) =>
console.logThe current value of my signal is: mySignal)});
});
50
Angular v16 | The Ultimate Guide to Angular Evolution
importtoObservable, toSignal } from @angular/core/rxjs-interop;
@Component
export class App
signalAsh);
toObservablethis
lastName$ = ofKetchum);
lastName = toSignalthis.lastName$, ‘’);
}
importsignalState } from @ngrx/signals;
const state = signalState

John,
lastName: Smith,
},
foo: bar,
numbers: [1, 2, 3],
});
console.logstate
console.loguser
console.loguser.// ‘John’
The real revolution will come when the Angular Team releases signal-components. These
components will work without zoneJS and will have their own change detection strategy
based solely on signals. It will be possible to update DOM elements with surgical
precision, without unnecessary traversal of the component tree.
It’s also worth mentioning that external libraries like ngrx also implement support for
signals. The NgRx store will have its signal-based counterpart called SignalStore.
Benets:
The introduction of a new experimental reactive primitive is a promise of a sim
mental model for reactivity in Angular. Its goals are to lower the learning curve, reduce
the number of errors and make the whole development process intuitive and
straightforward. With the future arrival of signal-based components, significant
performance improvements are expected.
51
Angular v16 | The Ultimate Guide to Angular Evolution
Expert Opinion:
I think signals will have a dramatic impact on many sides of the framework from
performance to bundle size improvements. This will be especially visible when signals are
integrated into the change detection mechanism. It will make the process much more
efficient and performant because, unlike the current zone.js-based implementation,
signals will allow Angular to know in which exact component a change occurred and
update only the affected components. Besides that, the change detection mech-
anism will become much simpler and unied, because we will have only one predictable
change detection strategy, which will also have a positive impact on the learning curve.
Finally, we will be able to reduce bundle size by removing the zone.js dependency, which
will not be needed for the new change detection mechanism. And this is just one of the
examples. I think that we are currently seeing only the tip of the iceberg.
~ Dmytro Mezhenskyi
Google Developer Expert
The Angular signal feature is currently in its Developer Preview stage. Once this feature
becomes stable, it is poised to introduce an entirely new approach to writing
Angular applications. The elimination of zone.js will free developers from concerns
related to change detection cycles and performance issues, allowing them to
concentrate more on their business logic. This is exemplified by the transition from
familiar [(ngModel)] binding syntax to the new signal and effect syntax, which requires
developers to adapt and update their projects. Despite these changes, I rmly believe
that this innovation holds great promise in advancing the framework to the next level.
~ Balram Chavan
Google Developer Expert
SSR Hydration (developer preview)
Challenge:
By default, Angular renders applications only in a browser. If any web crawler tries to

searchable content. This is one of the reasons why we might want to implement
Server-Side Rendering, the process of rendering our site on the server side and returning
the whole HTML structure.
A server-side rendered HTML is displayed in the browser, while the Angular app
bootstraps in the background, reusing the information available in server-generated
HTML. The HTML then destroys DOM and replaces it with with a newly rendered and fully
interactive Angular app.
UXPerformance
52
Angular v16 | The Ultimate Guide to Angular Evolution

a negative impact on Core Web Vitals, such as FID, LCP and CLS.
Solution:
Angular introduced hydration, a new feature currently available for developer preview.
We can enable it as follows:
importbootstrapApplication, provideClientHydration, } from @angular/
platform-browser;
...
bootstrapApplicationRootCmp
providers: [provideClientHydration
});
<test-component ngSkipHydration />
@Component
...
host:true},
})
class TestComponent 
It enables reusing server-side rendered HTML in the browser without destroying it.
Angular matches the existing DOM elements with application structure at runtime. This
results in a performance improvement in Core Web Vitals and a better SEO performance.
There is also an option to skip hydration for some components, or rather component
trees, if they’re not compatible with hydration. For example, manipulating DOM directly
with browser APIs. Use one of the following options to enable hydration:
#1
#2
53
Angular v16 | The Ultimate Guide to Angular Evolution
Performance
There are also some other improvements added for SSR. These include new
standalone-friendly utility functions to provide SSR capabilities to an application


https://angular.io/guide/hydration
Benets:
Full hydration brings:
Better UX:
Enhanced SEO: in comparison to destructive hydration
Expert Opinion:
The Angular team has been deeply committed to the ongoing renement of Server-Side
Rendering (SSR) capabilities. Over time, they’ve introduced a series of enhancements to
SSR applications, aiming to provide a smoother and more efcient experience for both
developers and end-users. The team’s focus has been on achieving the goal of a fully
hydrated application, which means that the application is not just server-rendered but
also preloaded with the necessary data and components, offering a seamless and
responsive user experience.
This concerted effort to improve SSR reects the Angular team’s dedication to staying
at the forefront of web development technology. It’s an exciting journey of innovation,
and it’s intriguing to anticipate how these ongoing efforts will shape the landscape
of Angular in the future. The advancements in SSR hold the promise of further
enhancing the performance, SEO-friendliness, and overall user experience of Angular
applications, making them even more competitive and appealing in the dynamic world
of web development.
~ Balram Chavan
Google Developer Expert
Vite-powered dev server
Challenge:
Previous experimental features related to the Angular building systems affected
only the building process and not the development process, especially in the case
of the development server with hot-reload.
Dev Experience
54
Angular v16 | The Ultimate Guide to Angular Evolution
Required inputs
Challenge:
Until Angular 16, it was not possible to mark inputs as required, but there was a common
workaround for this using a component selector:
Dev Experience
Solution:
The esbuild-based build system for Angular CLI entered developer preview in version 16,
with the goal of significantly speeding up the build process. Early tests showed
improvements of over 72% in cold production builds. With this update, Vite is utilized
as the development server, while esbuild enhances both development and production
builds for faster performance. However, it’s important to note that Angular CLI exclusively
uses Vite as a development server. This is due to the Angular compiler’s need to maintain
a dependency graph between components, requiring a different compilation model.

...
architect
build
builder: @angular-devkit/build-angular:browser-esbuild,
...
Benets:
Improvements in the Angular building system bring:
An improved developer experience
• Reduced time and costin heavy CI/CD processes
Please note that these changes are still in experimental mode.
55
Angular v16 | The Ultimate Guide to Angular Evolution
@Component
selector: app-test-component[title], // note attribute selector here
template: title }},
})
export class TestComponent
@Input
title!: string;
}
Unfortunately, this was far from ideal. The first thing was that we polluted the
component selector. We always had to put all required input names to the selector,
which was especially problematic during refactors. It also resulted in a malfunction of
the auto-importing mechanisms in IDEs. And second, forgetting to provide the value for
an input marked this way meant the error was not very accurate, as there was no match
at all for such an “incomplete” selector. You can see this here:
ERROR
src/app/app�component�html:1:1 - error 
1.If ‘app-test-component’ is an Angular component, then verify that it is part of this module.
2. If ‘app-test-component’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA” to the @NgModule.schemas’ of
this component to suppress this message.
1.<app-test-component></app-test-component>
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~


~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Error occurs in the template of component AppComponent.
Solution:
The new feature allows us to explicitly mark the input as required, either in the @Input
decorator:
@Inputtrue}) title!: string;
56
Angular v16 | The Ultimate Guide to Angular Evolution
or the @Component decorator inputs array:
However, the new solution has two serious drawbacks. One of them is that it only works
in AOT compilation and not in JIT. The other drawback is that this feature still suffers from

in Angular. TypeScript will raise an error for this property since it was automatically
declared as non-nullable but not initialized in the constructor or inline.
This means that you still need to disable this check here e.g. by explicitly marking this
property with a non-null assertion operator, even though it has to be provided in the
consumer template:
@Component
...
inputs: [
title, required: true}
]
})
@Inputtrue}) title!: string;
ERROR
src/app/test-component/test-component�component�ts:9:3 - error 

9 title: string;
~ ~ ~
Benets:
The existing workarounds are replaced by a new solution with a very simple and
straightforward syntax.
57
Angular v16 | The Ultimate Guide to Angular Evolution
Input transform function
Challenge:
Angular interprets all static HTML attributes as strings. For example, if boolean attributes
are considered true when they are present on a DOM node,i.e. “disabled,” Angular,
by default, interprets them as strings.
Solution:
Since the release of Angular 16.1, we can provide an optional transform function for the
@Input decorator. This allows us to simplify the process of transforming values and
discontinue the use of setters and getters that have been used for this purpose so far.
Transform function:
Dev Experience
function toNumbervalue: string | number): number
return isNumbervalue) ? value : parseIntvalue);
}
@Component
selector:app-foo,

standalone: true,
})
export class FooComponent
@Inputtransform: toNumber }) width: number;
}
<app-foo width=100 />
<app-foo [width]=100 />
Usage in template:
58
Angular v16 | The Ultimate Guide to Angular Evolution
Additionally, Angular offers us two built-in transform functions that we can use:
importbooleanAttribute, numberAttribute } from @angular/core;

@InputbooleanAttribute }) status!: boolean;

@InputnumberAttribute }) id!: number;
Benets:
Transform functions are pure functions, so they improve readability, reusability and
testability.
Router data input bindings
Challenge:
Obtaining router-related data inside components is not very comfortable. We have to
inject an ActivatedRoute token, subscribe to its properties, manage these subscriptions
to ensure no memory leaks, and so on.
Solution:
Angular version 16 brings another interesting feature related to component inputs: the
ability to bind them directly to the current route variables, such as path params and
query params. This eliminates the need to inject ActivatedRoute into the component in
order to use router data.
With this feature, data is being bound only to the routable components present in the
routing configuration, and inputs of children components used in the templates of
routable routes are not affected. Route data is matched with inputs by name,or input
alias name if present. This is done so there is more than one piece of data that can
potentially be put as the input value.
The list below shows the precedence of data being bound to input property if the names
are the same:
Dev Experience
Efciency
59
Angular v16 | The Ultimate Guide to Angular Evolution
1. Resolved route data
2. Static data
3. Optional/matrix params
4. Path params

There is much more complexity if we consider “inheriting” data from places like the

To enable this feature, we have to use a dedicated function called with
ComponentInputBinding.
Example route definition:
bootstrapApplicationAppComponent
providers: [
provideRoute
[

path: example/:id,

bar: true,
},
baz:=> example string },
loadComponent:  => import./app/todo/todo.component),
},
],
withComponentInputBinding
),
],
});
60
Angular v16 | The Ultimate Guide to Angular Evolution
@Component
selector: example-cmp,
standalone: true,
template: ‘’,
})
export default class ExampleComponent
@Inputstring;
@Inputboolean;
@Inputstring;
}
Benets:
ed
components, consequently diminishing the requirement for repetitive code and dealing
with extra RxJS subscriptions.

Injectable DestroyRef and takeUntilDestroyed
Challenge:
The cleanup process was a common problem Angular programmers had to deal with,
especially when we wanted to implement a component/directive lifecycle with long
RxJS subscriptions. The standard way to do this was to use an OnDestroy lifecycle
hook to complete all relevant streams and execute other cleanup actions. However,
this caused some overhead and unwanted boilerplate code. Another way to achieve
this implementation was to use third-party solutions like @ngneat/until-destroy, but
as opposed to built-in ones, they can introduce compatibility issues and less seamless
integration.
Solution:
In the new Angular version, we receive a brand new injectable for registering cleanup
callback functions that will be executed when a corresponding injector is destroyed.
Dev Experience
61
Angular v16 | The Ultimate Guide to Angular Evolution
const destroyRef = injectDestroyRef);
// register a destroy callback
const unregisterFn = destroyRef.onDestroy=> doSomethingOnDestroy
// stop the destroy callback from executing if needed
unregisterFn
Such an injectable is allowed to introduce yet another feature: the takeUntilDestroyed
operator. This operator uses the DestroyRef injectable underneath and is a safe way to
avoid memory leaks in Angular apps.
importtakeUntilDestroyed } from @angular/core/rxjs-interop;
@Component
...
})
export default class MyComponent
constructor
intervalpipetakeUntilDestroyedsubscribe
value => console.logvalue)
);
}
}
Benets:
The new operator is a convenient way to avoid memory leaks without dealing with
OnDestroy lifecycle hooks and subscription references. DestroyRef also allows you to

62
Angular v16 | The Ultimate Guide to Angular Evolution
<app-your-component-name [foo]=”bar”>
</app-your-component-name>
Self-closing tags
Challenge:
When we don’t use a content projection mechanism, we are not placing any content


<br />), but in Angular, we always had to repeat the same name in opening and closing
tags, as follows:
Dev Experience
Solution:
Self-closing tags is a highly requested feature that arrived in Angular version 16. You can
use self-closing tags for your components.
This feature is optional and backward compatible, so you can continue to use
the standard approach, especially when using content projection.
<app-your-component-name [foo]=”bar”>
Benets:
Angular template syntax gets easier and more readable.
63
Angular v16 | The Ultimate Guide to Angular Evolution
runInInjectionContext
Challenge:
There was no convenient way to inject dependencies outside of construction time, like
after user interaction or conditionally after resolving some asynchronous value.
Solution:
An “inject” function is a function that Injects a token from a current injection context.
We mostly use it during the construction time of classes being instantiated by the DI
system. Examples of classes include components, pipes and injectable services.
There is, however, a possibility to call “inject” at any time of the life cycle if we use the
“runInInjectionContext” function. This allows us to instantiate dependency on demand
after a user interaction.
Dev Experience
@Injectable
providedIn: root,
})
export class MyService
private injector = injectEnvironmentInjector);
someMethodvoid
runInInjectionContextthis=>
const otherService = injectOtherService);
});
}
}
Benets:
We get a possibility to inject dependencies at any time, as long as we have a reference
to the injector. This approach can improve application performance if we combine it with
lazy loading.
64
Angular v16 | The Ultimate Guide to Angular Evolution
Dev Experience
Efciency
Standalone API CLI support
Challenge:
There was no way to generate a new project as a standalone from the beginning. We
had to manually remove AppModule and rewrite the bootstrapping process to
a standalone version with a bootstrapApplication function call. All components,
directives and pipes in such a project were generated using built-in code generators in
a non-standalone version by default.
Solution:

a new Angular project.
ng new --standalone [name]
       

standalone versions by default.
Benets:

Typescript/Node�js support

results in further computation time, memory usage and package size optimizations,
as well as many feature enhancements.
65
Angular v16 | The Ultimate Guide to Angular Evolution
ECMAScript decorators (available in 5�0)
Dev Experience
Challenge:
Typescript supported custom experimental decorators for years. They’re familiar to every

services, pipes, directives, inputs, outputs and injections in constructor arguments. They
were implemented long before TC39 decided on a decorator’s standard, and now there
is a mismatch between the old TypeScript and the new ECMAScript decorator. Such
mismatch can cause compatibility and integration issues for developers.
Solution:

typing, like the ClassMethodDecoratorContext type which impacts meta information


function loggedMethod<This, Args extends any[], Return
targetthis: This, ...args: Args) => Return,
context: ClassMethodDecoratorContext<
This,
this: This, ...args: Args) => Return
>

const methodName = Stringcontext.name);
function replacementMethodthis: This, ...args: Args): Return
console.logmethodName});
const result = target.callthis, ...args);
console.logmethodName});
return result;
}
return replacementMethod;
}
There is one important difference between the old and new implementation - decorators
used in the constructor parameters will not work, as the standard doesn’t support the
following code:
66
Angular v16 | The Ultimate Guide to Angular Evolution
constructorOptionalpublic myService: MyService
myService = injectMyServicetrue });
So we need to use the inject function instead:
Benets:
          
longer need to rely on the TypeScript custom implementation without its JavaScript
counterpart. Instead, we can use a solution that will be directly supported by all modern
browsers.
Extending multiple TS conguration les
Dev Experience
Challenge:
Typescript supported custom experimental decorators for years. They’re familiar to every

especially in a mono-repository where multiple applications or libraries are involved.
This process requires us to create a chains of extensions as follows:
67
Angular v16 | The Ultimate Guide to Angular Evolution
Solution:


compilerOptions
strictNullChecks: true
}
}

extends: ,
compilerOptions
noImplicitAny: true
}
}

extends:.,
: [./index.ts]
}

compilerOptions
strictNullChecks: true
}
}

compilerOptions
noImplicitAny: true
}
}

"extends": ["", ""],
"": ["./index.ts"]
}
68
Angular v16 | The Ultimate Guide to Angular Evolution
Benets:

workspace by streamlining the management of compiler options across multiple
projects.
All enums as Union enums (available in 5�0)
Dev Experience
Challenge:

numeric literals, like 1,2, 300, “foo” or “bar,” for an enum to make it a union enum. In such
a case, union enum members become types as well. That means that certain members
can only have the value of an enum member. It also means that enum types themselves
effectively become a union of each enum member.
Solution:

union enums. All members of all enums can be referenced as types and all enums can
be successfully narrowed.
The following example with computed enum members is correctly interpreted

const'data';
const enum Routes
Parts = }/parts,
Invoices = }/invoices,
}
Benets:
This feature brings more flexibility when defining types and more intelligent type
inference by the TypeScript transpiler.
69
Angular v16 | The Ultimate Guide to Angular Evolution
interface CSSStyleRule
// ...

getCSSStyleDeclaration;

set
// ...
}
Unrelated Types for Getters and Setters
Dev Experience
Challenge:
In a getter/setter pair, the get type had to be a subtype of the set type, which potentially

Solution:

for a getter/setter pair.
Benets:
   
different types.
Angular v17
release date: 11.2023
Deferred Loading
New Control Flow
Esbuild
Signals
71
Angular v17 | The Ultimate Guide to Angular Evolution
Angular 17 marks a pivotal update in the framework’s evolution, introducing streamlined
features and setting a robust foundation for future advancements in signals and
template syntax. In this version, Angular also continues its journey towards enhancing
performance and improving SSR.
Signals library (stable)
Note:
Signals are introduced and described in the “Angular 16” chapter. Here we will focus on
the changes that have occurred since then.
Challenge:
The Angular signals library, in its developer preview phase, encountered some
modifications and adjustments due to feedback from the Angular community. Various

system in the initial proposal.
Solution:
mercial


mutate the value stored by the signal. The mutate function skipped comparing values
because its purpose was to modify the value of the signal by design. Now, it is
recommended to use only the update function.
The second change had to do with the implementation of the default function for
comparing signal values.
The defaultEquals function implementation in v16 considered any two objects to be
different. so that even if we returned references to the same object, all dependent

Dev Experience
EfciencyPerformance
72
Angular v17 | The Ultimate Guide to Angular Evolution
// Angular 16 version
export function defaultEquals<Ta: T, b: T
returna === null || typeof a !== 'object') && Object.isa, b);
}
// Angular 17 version
export function defaultEquals<Ta: T, b: T
return Object.isa, b);
}



about the change, create a new reference of the object with the updated properties

function and then specify it in the signal options.
The upgrade of the API to the stable version does not include the "effect" function,
as there is still ongoing discussion about its semantics and potential improvements.

            
component template, only this component is marked as dirty and its ancestors are

performance.
It is important to note that Angular 17 still does not include signal-based component
implementation, even in the developer preview mode. When this implementation arrives,
it is supposed to revolutionize the change detection system, because components will
not use zoneJS and DOM recalculation will only happen after the values related to the
signal view are changed.
Benets:
The stabilization of the Angular signals library in Angular 17 lays solid groundwork
for future advancements, particularly in moving away from zone.js and towards
signal-based components. This shift is a step towards change detection system
    
development.
73
Angular v17 | The Ultimate Guide to Angular Evolution
Expert Opinion:
At this juncture, I hold no particularly strong opinion on the signals library. My perpetual
quest revolves around enhancing both user experience (UX) and developer experience
(DX). Nonetheless, I avoid excessive “hype” concerning the introduction of signals at the
framework's core, opting instead for a rational assessment of the potential opportunities
signals may herald in the future. A substantial benet would arise if we could seamlessly
transition away from zone.js, aligning with our overarching objective of establishing
a viable route toward creating fully zoneless applications (as one of the goals).
~ Artur Androsovych
Angular Expert
Signals are becoming a mainstream technique, being introduced in the most popular
frontend frameworks, the reason being that it is the perfect technique for ne-grained
synchronous reactivity. For a long time, we used to handle all states in an asynchronous
reactive approach using RxJS, whereas state management itself is a synchronous task,
such that RxJS is not the right tool by default. This overcomplicated a few use cases
and is the reason for unexpected glitching. This is a lot simpler with signals. Additionally,
this ne-grained reactive primitive can, and will, be used for ne-grained and zoneless
change detection in the future, when signal-based components land in Angular. This
is no small change, and will rather change the way we develop reactive Angular
applications completely.
~ Stefan Haas
Nx Champion
Signal inputs
Challenge:
The current implementation of component inputs is not very reactive. In order to listen
for changes, we use component lifecycle hooks. That means that if we want the input
values to interact with the Signal API, we need to handle the logic manually.
Solution:
Angular version 17.1 enables signal inputs for components. This means we no longer use

Dev Experience
EfciencyPerformance
74
Angular v17 | The Ultimate Guide to Angular Evolution
@Component
selector: 'my-cmp,
standalone: true,
name
})
export class MyComponent
name = input<string
}
export class MyComponent
name = input<string
helloMessage = computed=> ‘Hello ’ + name
constructor
effect=>
console.log‘logging: ’ + this.name
})
}
}
This mechanism allows you to simplify the reactivity of the component, as it allows you

a need to use ngOnChanges lifecycle hook.
The Signal input API has extra capabilities compared to its standard counterpart, such as
providing default values, marking input as required, setting aliases, and various transform
functions.
75
Angular v17 | The Ultimate Guide to Angular Evolution
New control ow (Developer preview)
Challenge:

on structural directives, has a few disadvantages. For example, the boilerplate, which
is large compared to other frontend frameworks, is necessary even for a single if-else
statement.
Dev Experience
EfciencyPerformance
<div *ngIf="condition as value; else elseBlock"value}}</div>
<ng-template #elseBlock>Content to render when value is null.</ng-template>
export class MyComponent
// required input
name = input.required<string
// input with default value
color = input‘red’);
// input with alias
disabled = input<booleanfalse
// input with transform function
age = input.requirednumberAttribute });
}
Benets:

ecosystem and transforms the way we deal with component input changes.
          
streamlining the management of component inputs and facilitating more intuitive
coding practices.
76
Angular v17 | The Ultimate Guide to Angular Evolution

which is strongly based on the current change detection system. Support for both
zone-based and signal-based approaches in directives would greatly complicate the
code with no possibility of tree shaking it.
Solution:


whose current design would not work in zoneless signal-based applications.


and then use a syntax very similar to the one we know from JavaScript.
The change affects the three most commonly used structured directives: ngIf,
ngSwitch and ngFor. At this point, there is no planned implementation of custom
blocks.
An if/else statement:
A switch/case statement:
@iftime < 12

} @else iftime < 17

} @else

}
@switchfruit
@case 'apple'
<apple-cmp />
}
@case 'banana'
<banana-cmp />
}
@default
<unknown-fruit-cmp />
}
}
77
Angular v17 | The Ultimate Guide to Angular Evolution
A loop statement:
The loop has received the most valuable improvements out of all the structures:
The @empty block is available, which allows us to display the content when the
list we iterate over is empty.
It is no longer necessary to create a special trackBy function to pass it as an
argument. Instead, we only need to specify the unique key of the object to be tracked.
The @for block requires the use of the track function, which significantly
optimizes the process of rendering the list and managing changes without the need
for developer interference.

directives we are familiar with? In version 17, they remain unchanged. But with the arrival

will go into a deprecated state.
However, there is no need to worry about refactoring. The Angular Team has created

the scheme should handle the transition to the new syntax without a programmer’s
interference. To switch to the new syntax, all you need to do is execute the following
command:
<ul>
@foritem of items; track item
<liitem.name }}</li>

<li>No items...</li>
}
</ul>
ng generate @angular/
Benets:
The new control flow in Angular offers a more succinct and readable syntax,
significantly reducing boilerplate in templates. It ensures smoother integration with
future signal-based change detection systems, enhancing application performance.
Additionally, it lays the groundwork for advanced features such as deferred loading,
contributing to optimized load times and a better overall user experience.
78
Angular v17 | The Ultimate Guide to Angular Evolution
Deferred loading (developer preview)
Challenge:
A lack of lazy loading in a web app can lead to slower page load times and increased
bandwidth usage, as all content is loaded at once regardless of its immediate
necessity. As long as Angular has lazy-loading modules in routing, there is no simple
and convenient way to lazy load individual components, even though it’s achievable

Solution:
Angular version 17 introduces the new lazy-loading primitive called "defer," based on the
syntax introduced in the new control flow. This extremely useful mechanism allows
a controlled delay in the loading of a page’s selected elements. That is particularly
UX
Dev Experience
Performance
According to public benchmarks,
are up to 90% faster.
Expert Opinion:
The new control ow is fabulous. The syntax is quite similar to the JavaScript syntax, and
the readability has increased. This new syntax is what we are waiting for. It’s also more
similar to JSX (not equal), but this can reduce the gap with React, and that can help
React developers jump into the Angular environment. With this new approach, we can
focus on the view’s logic and not on what Angular needs to show our logic correctly;
that’s a fantastic improvement for the developers and reduces the entry-level in the
framework.
~ Luca Del Puppo
Google Developer Expert
The built-in new control ow brings several key improvements:
No need to import NgIf, NgFor, and more in standalone components.
Automatic enclosure of code blocks with {}. So no need for <ng-container>.
Ergonomic and type-checking enhancements
Improved repeater performance
A step toward zoneless apps
These changes simplify development, reduce code verbosity, and enhance performance,
making Angular even more developer-friendly.
~ Fatima Amzil
Google Developer Expert
79
Angular v17 | The Ultimate Guide to Angular Evolution

which improves the application's loading speed, especially for users with a slower
internet connection.

can use them individually or in any combination, depending on when you want to load
the content.
“When”
a true value.
An important note is that once the block’s content has been asynchronously loaded,
there is no way to undo that loading. If we want to hide the block’s contents, we need to
combine the @defer block with the @if block.
“On”

Idle - This is the default trigger. The element will be loaded when the browser
enters the idle state. The requestIdleCallback method is used to determine when the
content will be loaded.
Interaction - Content will be loaded upon user interaction, click, focus, touch,
and upon input events, keydown, blur, etc.
Immediate - Loading will occur immediately after the page has been rendered.
Timer(x) - Content will be loaded after X amount of time.
Hover - Content will be loaded when the user hovers the mouse over the
area covered by the functionality, which could be the placeholder content or a
passed-in-element reference.
Viewport - Content will be loaded when the indicated element appears in the
user's view. The Intersection Observer API is used to detect an element’s visibility.
@deferwhen condition
<deferred-cmp />
}
@deferon interaction
<deferred-cmp />
}
80
Angular v17 | The Ultimate Guide to Angular Evolution
@deferwhen cond; on interaction, timer
<deferred-cmp />
}
@deferon interaction; prefetch on idle
<deferred-cmp />
}
@deferwhen condition
<deferred-cmp />
}
@placeholderminimum 2s
<span>There will be deferred content.</span>
}
It is worth noting that loading content, as in the case of when, is a one-time operation.
“Prefetch”: There may be situations where we want to separate the process of fetching
content from rendering it on the page. In such a case, we need the prefetch condition.
It allows us to specify the moment, using the previously mentioned triggers, when the
necessary dependencies will be downloaded. As a result, interaction with this content
becomes much faster, resulting in a better UX.
We also have three very useful, optional blocks we can use inside the @defer block:
@placeholder - used to specify the content visible by default until the asynchronously
loaded content is activated. Example:
The "minimum" condition allows you to specify the minimum time after which
the delayed content can be loaded. In the example used above, this means that
even if the condition is met immediately, the content will be swapped after 2 seconds.
@loading - the content of this block is displayed when the dependencies are being
loaded. Example:
We also have the ability to combine conditions and triggers:
81
Angular v17 | The Ultimate Guide to Angular Evolution
@defer
<deferred-cmp />
}
@loadingafter 100ms; minimum 1s
<span>Content is loading...</span>
}
@defertimeout 1s
<deferred-cmp />
}
@error
<p>Failed to load the deferred component</p>
<p>Error$error.message }}</p>
}
Within this block, we can also use the minimum condition, which works the same way as
within the @placeholder. It indicates the minimum time for which the block’s content will
be visible. We can also use the “after” condition, which indicates the amount of time it
will take for the block’s content to appear. If it takes less than 100ms to load, the loader

@error - represents the content rendered when the deferred loading failed for some
reason. Example:
When using the defer block together with the @error block, it is possible to use
a special timeout condition. This condition allows you to set a maximum loading time. If
@error block will
be displayed. Inside this block, the user has access to the $error variable, which contains
information about the error that occurred during the loading process.
Benets:
Deferred loading in Angular enhances performance by reducing initial bundle
size, speeding up load times, and enabling controlled, asynchronous loading of
individual components based on user interaction or other predefined conditions.
This leads to a more efficient and user-friendly experience.
82
Angular v17 | The Ultimate Guide to Angular Evolution
Inputs Binding with NgComponentOutlet
Challenge:
When we used the NgComponentOutlet structural directive to create dynamic
components, there was no convenient way to pass the data to them. The usual solution
was to create a new injector and transfer data by a custom injection token.
Solution:
In Angular 16.2, we received a possibility to bind data to inputs of a component created
with NgComponentOutlet.
Dev Experience
Efciency
Expert Opinion:
Deferred loading opens a new way to reduce the bundle size of every component and
introduces a new way to load only essential code needed for the current view. This
feature will probably be one of the leading solutions to reduce the page size in a Server
Side Render application; it helps to render only the needed parts and skip the dynamic
content that isn't required on the page start-up or for the SEO.
~ Luca Del Puppo
Google Developer Expert
As for the deferred loading feature, it's truly incredible! With this feature, we can
lazily-load content within an Angular template. It's much more than just simple
lazy loading; we can load chunks based on conditions and triggers and even prefetch
in advance. This is bound to revolutionize the way we construct our Angular templates.
~ Fatima Amzil
Google Developer Expert
83
Angular v17 | The Ultimate Guide to Angular Evolution
Animation lazy loading
Challenge:
Animations are always downloaded while the application is bootstrapped, even though
in most cases, animations occur while the user is interacting with an element on the
page. This results in increased bundle size.
Solution:
Animation lazy loading is a new functionality in version 17 that solves this problem by
introducing the ability to asynchronously load code that is associated with animations.


UX
Performance
Component
selector: 'my-component',
imports: [NgComponentOutlet],
template:
<ng-template
*ngComponentOutlet="dynamicComponent; inputs: dynamicComponentIn-
puts;" />

standalone: true,
})
class FooComponent
readonly dynamicComponent = FooComponent;
readonly'Bar' }
}
In the child component from the example above, we have to create @Input with a ‘foo’
name, or alias and the data will be bound from the parent.
Benets:

improves code readability and developer experience.
84
Angular v17 | The Ultimate Guide to Angular Evolution
importprovideAnimationsAsync } from '@angular/platform-browser/anima-
tions/async';
bootstrapApplicationAppComponent
providers: [provideAnimationsAsyncprovideRouterroutes)],
});
And that's it! Now we just need to make sure that all functions from the @angular/
animations module are only imported into dynamically loaded components.
Controlling imports in our application is easy, but the process can become problematic
when we do it with libraries. An example of such a library is @angular/material, which
relies heavily on @angular/animations, making it very likely that the module
responsible for animations will be pulled into the initial bundle.
If we want to check if the animations were downloaded asynchronously, we can build
our application with the --named-chunks@angular/animations
and @angular/animations/browser in separate bundles in the Lazy Chunk Files section.
build with asynchronously loaded animations
build with standard loaded animations
Initial Chunk Files



styles-YD2MB7C6.css
Lazy Chunk Files


chunk-FW06XWLR.js
Names
-
main

styles
Initial Total
Names
browser
-
animated-component
Raw Size

77.80 kB
33.23 kB
43 bytes
209.63 kB
Raw Size
62.20 kB


85
Angular v17 | The Ultimate Guide to Angular Evolution
Initial Chunk Files



styles-YD2MB7C6.css
Lazy Chunk Files
chunk-0CFIALD3.js
Names
main
-

styles
Initial Total
Names
animated-component
Raw Size
133.40 kB
102.12 kB
33.23 kB
43 bytes
268.79 kB
Raw Size
1.23 kB
Benets:
Lazy loading of any kind of resources enhances user experience by speeding up initial
page load times, saving bandwidth, prioritizing critical resources, and potentially
improving website performance and SEO.
View Transitions
Challenge:
There is no convenient way to implement smooth animated transitions between pages
in Angular.
Solution:
Support for the View Transition API has been introduced. This is a relatively new
mechanism that allows us to create smooth and interactive transition effects between
different views of a web page. Thanks to this API, we can make changes to the DOM tree
while an animation is running between two states.
Adding the View Transition API to our project is very simple.
First, we need to import the ‘withViewTransitions’ function at the bootstrap point of our
application.
UX
86
Angular v17 | The Ultimate Guide to Angular Evolution
importprovideRouter, withViewTransitions } from '@angular/router';
bootstrapApplicationAppComponent
providers: [provideRouterroutes, withViewTransitions
});
/* Screenshot of the view of the page we are leaving */
::view-transition-old
/* Representation of the new page view */
::view-transition-new
animation-duration: 2s;
}
Now, the application immediately gains a subtle input and output effect when
changing the URL. Of course, we have the ability to create custom animations. In the
example below, the transition effect was extended to 2 seconds by using prepared

This example is a very small sample of what we can achieve with this API. If you are
interested in the practical use of this mechanism, We encourage you to read the
material available in the Chrome browser documentation.
However, it is important to remember that this is a relatively new and experimental
feature. This means that it may not be fully supported in some browsers. You can check
the level of support for individual browsers on caniuse.
How does this feature work internally? When navigation starts, the API takes a screenshot
of the current page and puts it in ::view-transition-old pseudoelement. It also renders
a new page, puts it in view-transition-new and plays the animation between them.
Benets:
The View Transitions API simplifies the creation of smooth and cohesive navigation
animations, enhancing user experience by providing a seamless visual transition
between different states or views of a web application.
87
Angular v17 | The Ultimate Guide to Angular Evolution
Performance
Esbuild + Vite (stable)
Challenge:
Until now, Angular's build system primarily relied on Webpack for compiling applications,
requiring separate builders for different purposes like production builds, development

in angular.json, slower build processes due to repetition of common steps, and less

Solution:
In Angular v17, we received the new 'application' builder, which streamlines the build
process by using @angular-devkit/build-angular:browser-esbuild as its core. This
builder simplifies configurations by consolidating various tasks such as production

process. It enhances performance by executing common build steps only once and
      
efficient, modern module loading.
To apply these changes to an existing Angular project, change the builder from:
to:


The new application builder provides the functionality for all of the preexisting builders:
browser
prerender
server
ssr-dev-server
The usage of Vite build pipeline is encapsulated within the ‘dev-server’ builder, with no
Dev Experience
@angular-devkit/build-angular:browser
@angular-devkit/build-angular:application
88
Angular v17 | The Ultimate Guide to Angular Evolution
UX
SSR Hydration (stable)
Challenge:
Full Hydration presented in Angular version 16 was in developer preview mode, which
could have stopped us from using it in applications since it was not yet stable.
Solution:
From version 17, the solution is marked as stable, which means it is considered safe
for use in a production environment.
To enable it, use the following utility function in your project:
changes necessary to use new build system.
Benets:
apps.
Using the same builder for both types of applications reduces the risk of potential

‘ng build’ gets its speed increased by up to 87%, and ‘ng serve’ gets an 80% increase
in speed.
Benets:


Performance
importbootstrapApplication, provideClientHydration, } from '@angular/plat-
form-browser';
...
bootstrapApplicationRootCmp
providers: [provideClientHydration
});
89
Angular v17 | The Ultimate Guide to Angular Evolution
CLI improvements
Challenge:
The CLI does not take several new features from recent releases into account and uses
older solutions by default.
Solution:
In Angular 17, applications generated by ‘ng new’ will be standalone by default and will

directives, pipes) will produce standalone output as well.
You can use the following migration to convert existing projects to the standalone APIs:
Dev Experience
Efciency
ng generate @angular/core:standalone
Do you want to enable Server-Side RenderingSSR) and Static Site 
/Prerendering)
ng generate @
      


following migration:
Benets:
New features in the framework are becoming more accessible, and we get ready-made

90
Angular v17 | The Ultimate Guide to Angular Evolution
Devtools Dependency Graph
Challenge:
errors,
they were always caused by the inability to inject a specific token, and if a token was
successfully injected, there was no information about what injection context it came
from.
Solution:
The Angular Team implemented brand new debugging APIs related to dependency
injection. On top of that, they extended the capabilities of Angular Devtools and made it
possible to inspect DI in the runtime. It is possible to verify a component’s dependencies
in a component inspector, injection tree with a dependency resolution path and
providers declared in individual injectors.
Dev Experience
Environment Hierarchy
Element Hierarchy
Platform Root Standalo
AppComponent LayoutComponent
Benets:
The new debugging APIs for dependency injection in Angular helps developers to build

91
Angular v17 | The Ultimate Guide to Angular Evolution
Rebranding and introduction of angular�dev
Challenge:
The branding of Angular has been almost identical since the beginning of AngularJS,
which was released over 10 years ago. The framework documentation is also somewhat
outdated, often based on ngModules.
Solution:
tion of
the framework and a new angular.dev - a home for Angular’s new documentation.
Dev Experience
Old logo: New logo:
Angular.dev is a revamp with cutting-edge, interactive documentation. All examples
have been reimagined with the standalone API and the latest Angular magic. Plus, we've
got guides, tutorials and shiny Angular Playgrounds to code right in our browsers.
Benets:
The new Angular.dev documentation makes it easier for developers to learn and use
Angular.
92
Angular v17 | The Ultimate Guide to Angular Evolution
Typescript/Node�js support


Angular projects.
Explicit Resource Management (available in 5�2)
Dev Experience
Challenge:
There is no convenient way to explicitly manage resources with a specific lifetime.
For example, run some cleanup code when a given object reaches the end of its
life.
Solution:
cript

by solutions from other programming languages, for example, the “using” syntax from
C# or the “try-with-resource” syntax from Java. It allows a programmer to manage the
resource declaratively, meaning an object is disposed when execution leaves the scope
           
manually.
You can create a manageable resource by implementing a new Disposable interface
in your class or by creating a function that returns an object implementing Disposable
interface. Usually we use such a feature when we need some sort of “clean-up” after

connections.

execution leaves the function context, the Symbol.dispose method is automatically
called. This happens even if there was an exception during processing. We no longer

executed in all cases.
93
Angular v17 | The Ultimate Guide to Angular Evolution
class Foo implements Disposable

// “clean-up” code goes here
}
}
function doSomething
using foo = new Foo
// do something
ifsomeCondition
// do another thing
return;
}
}
"compilerOptions"
"target": "es2022",
"lib": ["es2022", "esnext.disposable", "dom"]
}
}
This feature also contains support for async disposable resources, Symbol.asyncDispose,
and extra methods for dealing with stacks like DisposableStack and AsyncDisposableStack.
Note that this feature is only available if you set the compiler target to es2022 and added
“esnext” or “esnext.disposable” to the “lib” array.
Benets:
Explicit Resource Management enhances code cleanliness and safety by providing

that clean-up or disposal code is automatically executed when the object goes out of

94
Angular v17 | The Ultimate Guide to Angular Evolution
Named and Anonymous Tuple Elements (available in 5�2)
Challenge:
Previously, it was not possible to mix labeled and unlabeled elements inside a single

led to unnecessary labels or loss of label information, especially in merged or rest
element scenarios.
Solution:
Typescript gained support for optional names or labels for each element of the tuple.
The all-or-nothing restriction has been removed and labels go as far as preserving
the merging with other tuples.
Dev Experience
// fully labeled tuple
type Coordinates = [latitude: number, longitude: number];
//partially labeled tuple
type  = [number, green: number, number];
// all labels are still preserved
type Combined = [...Coordinates, ...];
Benets:
The improvement enables greater flexibility and readability in TypeScript code.
Copying Array Methods (available in 5�2)
Challenge:
Old and well-known array methods like sort, splice or reverse, all update an array
in-place, meaning they mutate the original array. This can lead to unintended side
effects and make code harder to understand and debug, especially in complex
applications with shared state.
Dev Experience
95
Angular v17 | The Ultimate Guide to Angular Evolution
Solution:
          
copy. All methods that mutate the original array have their non-mutating variants
available and ready to use.




Benets:
Using non-mutable array methods over methods that will mutate arrays in place
in the JavaScript language have multiple benefits. These include enhancing
code predictability, maintainability, and readability by avoiding unintended side
effects and ensuring consistent data state across different parts of an application.
96
The Ultimate Guide to Angular Evolution
The future
Server-side rendering

is actively working on improving the SSR experience, and there are a number of exciting
new features on the horizon:
Streamed SSR: This will allow Angular applications to load more quickly, as the
server can stream the rendered HTML to the client as it is generated.
Partial hydration: This will allow Angular to hydrate only the parts of the
application that are needed immediately, which can further improve application
performance.
Change Detection and Reactivity

reactivity in Angular might look like:
Signal-based reactivity will become the default reactivity mental model in

current reactivity model based on RxJS observables.
RxJS will stay with us for more complex implementations, so we can continue
managing multiple asynchronous events at once. Combining RxJS with signals will be a
new standard,
spread,
with no extra traversal over the component tree.
Zone.js will become optional in Angular. This is because signals will not require
Zone.js to work, and removing Zone.js can improve performance and reduce bundle size.
Expert Opinion:
In the future Angular SSR technique will be easier to implement, it will not require much
conguration and will provide hydration so that Angular apps will be able to resume
at some point.
~ Aristeidis Bampakos
Google Developer Expert
97
The Ultimate Guide to Angular Evolution
Other changes
Further Angular-related changes that may appear soon include:
Token based theming will be introduced in the Angular Material library. The

theming API. All components will be refactored to be compatible with such an API.
Signals will gain their own runtime debug tools, as part of Angular DevTools, for
signal-based components inspection.
           
components, due to the transition towards the Standalone function-based API,

code.
Overall
Angular's vision for the future is to create a web development framework that is easy to
learn and use, fast, high-performing and scalable. To achieve this vision, the Angular
Team is committed to lowering the entry barrier for developers and improving factors
such as developer experience, user experience and performance. They actively
collaborate with the community and incorporate successful trends and best practices
from other frameworks to continuously improve Angular.
98
The Ultimate Guide to Angular Evolution
What the experts
are saying
How important is it to stay up-to-date with all the
latest changes in Angular, given the current pace
of changes?
Nowadays, Angular is making rapid changes, by introducing standalone APIs, signals,
new control ow, etc. Although it is completely possible to not adapt the new changes
and for example, keep using NgModules because of the backwards compatibility, it is
still recommended to adapt to the changes, because there are, and will be even more,
features only available for newer APIs. A great example is host directives, which are only
possible with standalone APIs. But don’t worry about refactoring, because Angular usually
delivers migration schematics to migrate to standalone APIs, or to the new control ow.
~ Stefan Haas
Nx Champion
In this context, a rational approach is derived from the observed behavior of the majority
of clients I have encountered. Within the organizations I have collaborated with, those
employing Angular-based applications exhibit a certain reluctance when it comes to
embracing the latest Angular versions. Their hesitancy arises from their search for
compelling reasons to justify such upgrades. At the core of this deliberation lies the end
consumer, the user, and their user experience.
For instance, take the case of Angular 15's Standalone API. Its implementation may not
manifest any discernible impact on the end user; it could be argued that its primary
effects are conned to enhancing the developer experience, and even this judgment
is inherently subjective. It's important to acknowledge the formidable challenge posed
by the task of updating huge applications that lack comprehensive test coverage. The
absence of robust testing engenders substantial risks, rendering the application more
susceptible to vulnerability in the face of such alterations.
~ Artur Androsovych
Angular Expert
In my opinion, it is very important. Especially in times of dynamic changes, I think
the strategy of frequent and small updates is much more benecial than waiting until
everything settles down. I always invest time to keep my Angular projects updated to
benet from new Angular features and improvements. New features bring new patterns
99
The Ultimate Guide to Angular Evolution
I know with all the exciting new changes coming out, you may be excited to embrace
the latest and greatest. And, pragmatically, I think it's a great way to learn for personal
projects or small isolated projects, but when it comes to larger projects involving a lot
of developers, I'd urge you to hold back for 2 things: For your team to feel comfortable
discussing the change and taking on the work, and for good documentation and best
practices to be established. Some of the new concepts are just the beginning of bigger
things and we may nd reasons to tweak, iterate, or pivot. No need to chase shiny as the
goal. On the other hand, Angular has also released security updates, enhancements,
and updating their dependencies to ensure the Angular projects we create are secure
in recent versions. It just doesn't get all the attention some of the bigger changes get.
It's vital to update Angular and dependencies following security guidelines and when
enhanced security features are released.
~ J� Alisa Duncan
Google Developer Expert
If your current project is based on Angular 10 or an earlier version, it may start to feel
outdated within the rapidly evolving framework landscape. The community is
continually striving to stay up-to-date, and you'll often find that answers
on platforms like StackOverow and other websites revolve around the latest Angular
frameworks.
Therefore, it is crucial to consider regularly upgrading your enterprise application to a
version close to the latest release. From a practical standpoint, I recommend maintaining
a gap of -1 or -2 Angular versions from the current one. For instance, if Angular 16 is the
current version with Angular 17 on the horizon, I advise companies to upgrade their
projects to at least Angular 14 or 15. This approach allows ample time for many enterprise
projects with dependencies on various Angular libraries, both open-source and
commercial, to catch up and align their libraries with the most recent developments.
~ Balram Chavan
Google Developer Expert
How do the overall changes affect the learning
curve? Is it easier to learn Angular in its latest form?
I think that in the future it will denitely become easier. Before, everyone who came to
try Angular was hit immediately by complex concepts like RxJS or NgModules. Now, the
and unleash better architectural seditions. Also, a simple update can often bring you
performance, security, and bundle size improvements for free.
~ Dmytro Mezhenskyi
Google Developer Expert
100
The Ultimate Guide to Angular Evolution
This question is somewhat complex to answer. If you're just starting to learn Angular now,
the process is considerably easier than it was a few years ago. This is because most of
the popular web frameworks have embraced TypeScript, and Angular is not the only
framework advocating for a typed approach to web development. Notably, features like
standalone components, simplified routing APIs, the introduction of new control flow
syntax, and improved error reporting have made it more accessible for newcomers to
dive into the Angular ecosystem.
In addition, the Angular documentation has grown significantly, offering a wealth of
tutorials and advanced concepts. There are ofcial cheat sheets, resources to address
common errors and their solutions, an open Discord channel for developers to connect,
and a range of Google-sponsored and community-driven events that enable
developers to network and learn from one another.
However, it's worth noting that many experienced developers have expressed concerns
about the rapid pace of change and the introduction of new features. This sometimes
requires them to revisit and potentially rewrite their existing projects, as well as continually
learn and adapt to stay current in the Angular landscape.
~ Balram Chavan
Google Developer Expert
I have been able to collect a lot of feedback from my students over the last few years.
RxJs and the app structure with the modules were often described as too complicated.
Little by little, we are eliminating these pain points.
~ David Muellerchen
Google Developer Expert
The learning curve will be flat for new beginners because they won’t have to go
through the same pains that experienced developers went through�
When experienced Angular developers learned the old version of Angular, they had to
know NgModule and import it to AppModule before using Angular components. To write
reactive code, they used Subject to store the state, subscribed the Subject to resolve the
Observable, and nally unsubscribed the subscription to avoid a memory leak. These are
a few examples of how Angular intimidated beginners in the old days.
learning curve has become more gentle and you have to learn less to build the simplest
Angular app. Nowadays, we experience a transition period which is hard for newcomers
because they have to learn the old stuff as well as new ones but I think in a year or two
things will settle down.
~ Dmytro Mezhenskyi
Google Developer Expert
101
The Ultimate Guide to Angular Evolution
Fast forward to 2023, the difculties of building Angular applications are signicantly
lower. We can learn standalone components and use them as the building blocks of
an application. We can store state in Signal and call APIs to set, update and compute
to calculate Signal value. If the requirements require an HTTP request or asynchronous
reactivity, developers can learn RxJS and the minimal operators. Learning RxJS can move
from the top learning list to a lower position. toSignal and toObservable RxJS-interop can
convert between Signal and Observable but they must be used with discretion.
With the new control flow, we should learn @if, @for and @switch instead of the
directive counterparts. From my personal experience, @if is easier than ngIf when there
are 2 or more else-if. I cannot nd a precise and elegant way with ngIf, ngElseIf and
ngElse directives. ngFor has trackBy, but it is not compulsory to use whereas @for makes
track mandatory and can be used to optimize a long list.
~ Connie Leung
Google Developer Expert
Wow, I feel bad for new Angular developers. They must feel like there's quite a dichotomy.
I think the difficulty in learning changes from the learner's past experience. If they
are already familiar with the web frameworks out there, they may prefer the new
changes, and if they are .NET devs, they may prefer the prior form of Angular. New devs
who have to learn how to maintain legacy Angular projects while simultaneously learning
new changes for new work are the ones I feel the most for. That said, while learning can
cause discomfort for all of us, I'm looking forward to these changes, how the framework
grows, and seeing all the cool things we can do with these features.
~ J� Alisa Duncan
Google Developer Expert
What are your expectations for the direction and
pace of change in Angular in the future?
In the next few versions, I expect that changes in the framework will reduce a lot of
boilerplate code, improve the developer experience and apply ergonomic approaches
when it comes to building Angular apps.
~ Aristeidis Bampakos
Google Developer Expert
The Angular team is highly responsive to community feedback, and their recent additions
reflect their commitment to improving the framework. Features like standalone
components, the inject() function for dependency injection, functional guard routes,
and the introduction of new control flow syntax for directives like ngFor and ngIf
102
The Ultimate Guide to Angular Evolution
There is a brighter future for Angular with all the great provided features and
improvements since v14 to v17. It’s the renaissance of Angular. These updates
bring signicant improvements and simplications, such as standalone components,
the removal of the need for modules, and the introduction of functional guards. The
latest versions introduce powerful features, including built-in control flow, enhanced
performance in v17, and deferred loading, which allows you to achieve a lot with minimal
code. The Angular team has hinted at a big surprise in v17, I won't spoil it (hahah), but
this surprise will for sure make learning Angular easier and greatly enhance the learning
experience.
~ Fatima Amzil
Google Developer Expert
It is the best time to be an Angular developer, and the Angular team works tirelessly
to include new and exciting features in each release. Angular 17 has not come out yet,
and major Angular podcasters have already scheduled meetings with Angular team
members to discuss Angular 18 and beyond.
~ Connie Leung
Google Developer Expert
demonstrate the team's endeavor to incorporate the best practices from other popular
frameworks such as React, Svelte, and Vue. Furthermore, the Angular team is investing
more effort into areas like Server-Side Rendering, Hydration, SEO optimization,
integrating ESBuild, engaging in discussions around Microfrontends, and more.
These initiatives clearly indicate that there are exciting developments on the horizon
for Angular.
~ Balram Chavan
Google Developer Expert
103
The Ultimate Guide to Angular Evolution
We appreciate you taking the time to read this ebook. Our team at House of Angular
is passionate about Angular, and we regularly share educational content that helps
businesses and developers gain a better understanding of the Angular framework.
We hope you found this ebook informative and that its contents will help you improve

If you have any questions about Angular or its features, we would be happy to help.
Contact us
Thank You
104
The Ultimate Guide to Angular Evolution
Bibliography
About authors
https://www.typescriptlang.org/
https://angular.io/
https://angular.dev/
https://blog.angular.io/
Angular.love blog: https://www.angular.love/en/
Main Author
Mateusz Dobrowolski
Angular Developer at House of Angular. He takes an active part in the angular.love
community, writing expert articles, and sharing his knowledge at Angular meetups.

author: @m-dobrowolski
Special thanks to
Krzysztof Skorupka
Angular Team Leader & Architect at House of Angular. Expert at Angular.love
community, blogger, and speaker.
Mateusz Stefańczyk
Angular Team Leader at House of Angular. Expert at Angular.love community, blogger,
and speaker.
Przemysław Łęczycki
Angular Team Leader at House of Angular. Expert at Angular.love community, blogger,
and speaker.
Dominik Donoch
Angular Developer at House of Angular. Blogger and active member of Angular.love
community.
Mateusz Basiński
Angular Developer at House of Angular. Angular.love blogger.
105
The Ultimate Guide to Angular Evolution
Maja Hendzel
Angular Developer at House of Angular. Angular.love blogger.
Miłosz Rutkowski
Angular Developer at House of Angular. Angular.love blogger.
Dawid Kostka
Angular Developer at House of Angular. Angular.love blogger.
Piotr Wiórek
Blogger and member of Angular.love community.
Invited experts
Fatima Amzil
Fatima is a cross-functional frontend technical leader and an expert in
Angular. Outside of her professional life, she contributes as a technical

Artur Androsovych


Expert in Angular in 2023. He focuses on runtime performance and has taught
teams about Angular internals for the past few years.
Aristeidis Bampakos

Plex-Earth. He is an award-winning author of Learning Angular and Angular
Projects books. Currently, he is leading the effort of making Angular accessible


Balram Chavan
Balram is an Architect specializing in designing and creating scalable, secure
solutions for various domains. His expertise spans the cloud, AI and web
development landscape. As the author of an Angular framework book, he
excels as a team player, an effective communicator, and a mentor.
Luca Del Puppo

          
time, I loves studying new technologies, improving himself, creating YouTube
content or writing technical articles.
J� Alisa Duncan
Alisa is a Senior Developer Advocate at Okta, full-stack developer, content
creator, conference speaker, Pluralsight author, and community builder who
106
The Ultimate Guide to Angular Evolution
 
        
and a volunteer at community events supporting underrepresented groups
entering tech.
Stefan Haas
Stefan is a freelancer and trainer focusing on Angular from Austria. He is the

Connie Leung

and youtube content creator.
Dmytro Mezhenskyi
Dmytro Mezhenskyi is the founder of the Decoded Frontend YouTube channel,
where he shares his knowledge about the Angular framework. As an author,
he has created a series of advanced video courses focusing on Angular and


MVP in Web Development.
David Muellerchen
Better known as WebDave, David has been an integral part of the Angular

and trainer, and a frequent speaker at meetups and conferences. He also
organizes weekly Angular livestreams and the Hamburg Angular Meetup.
Marko Stanimirović


Angular, and an organizer of the Angular Belgrade group.
107
The Ultimate Guide to Angular Evolution
House of Angular is a software agency with a focus on developing and supporting
Angular applications. They offer a variety of services, including:
application development,
team extension,
product and team audits,
and business consulting.
Having worked with Angular since its beginning and with over 10 years in app development,
they have become a trusted business partner for companies of different sizes and sectors.

knowledge and expertise to other users of this framework.
The company is actively involved in nurturing the Angular community. They support key

to open-source Angular projects and spread their expertise through writing articles and
giving talks at European meetups.
House of Angular has been recognized for their contributions with the Angular Hero of
Community 2021 award.
Angular�Love is a community platform for Angular enthusiasts, supportedby House of
Angular to facilitate the growth of Angular developers through knowledge-sharing
initiatives. It started as a blog where experts published articles about Angular news,
features, and best practices. Now angular.love also organizes in-person and online

           
reading the angular.love blog, attending meetups with talks from experts, and following
the community platform’s social media pages.
Angular.love community is a recipient of the Angular Hero of Education 2022 award.
Blog | Meetups | YouTube | X
(formerly Twitter)