Hi there 👋
Angular v16 comes with huge and big changes that will definitely change Angular’s future, popularity, and Angular developers’ life!
Here is the list of exciting new features in Angular 16!
🚦 Signals
Signals (in developer preview) is the most significant change brought to Angular 16 as well as Angular direction and whole life, as it will change the way Angular detects changes and fix a lot of pain developers had so far with Zone.js. I’ve already talked about the story behind Angular signals. You can check it out here.
💎 Create standalone app schematics
Standalone components are now completed with app schematics. You can generate a whole standalone app with Angular CLI. V16 comes with powerful schematics that allow you to convert your components, pipes, and directives to standalone ones. Also, these schematics can remove your existing ngModuels that are unnecessary after migration.
The newly generated app code is lighter (no conf files from v15 improvements + light app bootstrapping with the standalone feature; hence, no ngModule).
...
bootstrapApplication(App, {
providers: [provideHttpClient(), importProvidersFrom(FormsModule)],
}).catch((err) => console.error(err));🏎 Esbuild dev-server
Experimental support for ng build using esbuild is already available. With v16 the tooling team has made some improvements to the Development Server (in developer preview). Now, you can runng serve with esbuild.
To check it out, change "@angular-devkit/build-angular:browser" to "@angular-devkit/build-angular:browser-esbuild".
🧪Jest support
Jest is one of the most loved and popular tools among developers for testing. Angular default tool is Karma, but now, Angular is also working on supporting Jest and this is in developer preview in Angular v16, and that’s a piece of big news!
📢 Required inputs
With zero runtime overhead, it is now possible to make sure that a component or directive is used with its required inputs if needed. Otherwise, you’re going to get a compile-time error.
@Input({required: true}) myInput: string; // Required
@Input() myOtherInput: string; // Not required🚏 Bind route data, path params, and query params to inputs
This is a really excellent and practical feature that will definitely make life easier for developers with way lighter code. We can take advantage of the great functional guard feature and set component inputs directly from there!
// Add the withComponentInputBinding feature to the provideRouter method.
providers: [
provideRouter(appRoutes, withComponentInputBinding()),
]
// Update the component to have an Input matching the name of the parameter.
@Input()
set id(heroId: string) {
this.hero$ = this.service.getHero(heroId);
}➡️ mapToCanActivate helper function
In Angular 16, class guards are deprecated and Angular provides a function helper to make it easy to switch to function without having to remove existing class guards.
const route: Route = {
path: 'admin',
canActivate: mapToCanActivate([AdminGuard])
};🔨 DestroyRef & takeUntilDestroyed
Another feature that was shipped with v16 is DestroyRef and takeUntilDestoryed, which enables more flexibility when you’d like to unsubscribe.
...
obs$: Observable<SomeType>;
const subscripion = obs$.subscribe(...);inject(DestoryRef).onDestroy(() => subscription.unsubscribe());💦 Non-destructive hydration support
Time for user experience improvements with non-destructive hydration support. Once the browser receives the rendered markup from the server and parses it as a Document Object Model (DOM), Angular will traverse the structure, add event listeners, and create internal data structures. From that point, the application becomes interactive without requiring a rerendering process. This will fix the problem of encountering a “flicker” with Angular Universal.
💡 API to provide CSP nonce for inline stylesheets
Many enterprises are concerned with inlining scripts for security reasons. This is sometimes flagged as insecure and unsafe. This feature will help you to specify and announce your content security policy for inline styles.
// Standalone version
...
bootstrapApplication(AppComponent, {
providers: [{
provide: CSP_NONCE,
useValue: globalThis.myRandomNonceValue
]}
});A lot of other great features I didn’t mention above to make the article light, but they are available too in v16. Here is a quick list:
- ☑️ NgTemplateOutlet strict type-checking
- ♻️ Reuse server-generated component styles
- 💡 ProvideServerRendering for server-side standalone apps
- 💙 TS 5.0 support (Non-experimental decorators support)
- 🖼️ Improvements to NgOptimizedImage by enabling images to fit within their parent container rather than having explicit dimensions
- 💡 Streamline standalone import through Language service
- 💡 Improvement in the documentation and Material CDK components accessibility
- 💡 Angular team is working closely with the Material Design team to make Angular Material the referenced material design implementation for the Web
One upcoming feature, unforhtonathly not yet provided in v16 is Setting inputs in NgComponentOutlet (PR here) and this will look like:
It’s so practical when creating a dynamic component to be able to set its inputs directly.
<ng-container *ngComponentOutlet="MyComponent; inputs: myInputs" />// In component class
myInputs: {
message: "Hi there!",
data: [...]
},Isn’t it awesome all we got in Angular v16 box 😊 … I totally believe that Angular will become more popular in the next years!
That’s it for today, see ya 🙋
If you’ve got any questions or feedback, just hit comment or reach out to me via LinkedIn — I’m all ears!
If you like my article, subscribe to get my latest ones. If you like to experience Medium yourself, consider supporting me and thousands of other writers by signing up for a membership. It only costs $5 per month, it supports us, writers, and you have the chance to make money with your writing as well. Of course, you can cancel the membership anytime. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times!