Most is under the hood (zoneless) and it's amazing. The best "developer side " feature are imho: form component event stream (amazing amazing amazing).
The new control flow and forced move to stand alone component is amazing. The only thing that’s still annoying is change detection and if they make that work better then we’re in business
Awesome release. 😊 Here are the highlights I found (timestamps below): - zoneless change detection is available in experimental mode, not developer preview. Community libraries are often not compatible with it (yet) - it will be possible to develop libraries in Angular independently if they will be used on a Zone or Zoneless application - new Angular 18 will use Hybrid change detection by default - forms and router will be integrated with signals - Angular material components now support SSR Hydration - SSR Hydration support for i18n in developer preview - SSR rendering mode selection for routes - we will be abot to configure which routes are rendered on the client only, on the server, or at build time - Material 3 is available, Material 2 themes still supported - Signal-based APIs: input, output, model, viewChild, viewChildren, contentChild, contentChildren - Typescript upgraded to 5.4 - default ng-content is available - new forms events observable Timestamps 00:00 Intro 1:17 Zoneless Angular 4:43 Hybrid change detection 6:56 enhanced support for SSR hydration 9:46 Material 3 12:10 new Signal-based APIs 16:27 default ng-content 16:41 forms event observable
Sir/mam I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
Best parts of angular 18 are - Singla inputs (input()) - Model inputs (model()) - Signal query (viewChildren) - Material 3 theming - Angular forms global observable
Sir/mam I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
Thank you so much for giving so much new new functionalities in new version from angular 14-15-16-17... bcs of that i am very excited to learn new things... also i think angualr will be going to the bummmm......in market in feature bcs of new functionalities
Angular 17, the ability to respond to the compilation & cli, just incredible! I have never enjoyed working with Angular so much. I'm imagining v18 now.
@@maksadTohBhoolChuka How These Changes Help Developers: - Less setup and faster builds allow for rapid feature development. - Faster builds and optimized performance enhance application efficiency, improving the user experience. Before v17 it took more time than that, especially for our large applications with hundreds of modules. Currently even the live reload is very fast 🚀🚀
Sir I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
Really cool changes and improvments. I'm really looking forward for the zonelessness of Angular. Though I'm kind of sad, that the server.ts file is still ignored when serving. Would be huge for adding oidc to angular applications directly without any other technically unnecessary api. Thanks for the framework
We have an update guide at angular.dev/update-guide that can give you some insights on the move from 12 to the latest version. Since 12 we've added signals, SSR, @defer, new control flow, standalone components (option modules) and more. Lot's of new features to enjoy.
According to ChatGPT 4o, May 5, 2024... Q: Please briefly explain what ZoneJS does in the first place, and why on God's green earth would the Angular team remove it from their ecosystem. A: ZoneJS Overview: ZoneJS is a library that provides a way to track and intercept asynchronous operations in JavaScript. It essentially creates execution contexts called "zones" that wrap around asynchronous operations like setTimeout, promises, or AJAX calls. When an asynchronous task is completed, ZoneJS can trigger change detection to update the view, making it particularly useful in frameworks like Angular. Key Functions of ZoneJS: 1. Automatic Change Detection: ZoneJS helps Angular know when to update the view by automatically triggering change detection after any asynchronous operation completes. 2. Error Handling: It provides a centralized place to handle errors from asynchronous operations. 3. Task Tracking: ZoneJS can keep track of long-running tasks, helping to identify potential performance bottlenecks or memory leaks. Why Would Angular Remove ZoneJS? The Angular team considered removing ZoneJS for several reasons: 1. Performance Improvements: ZoneJS can add overhead to applications because it wraps many asynchronous APIs, which can impact performance. Removing it could make Angular applications faster and more efficient. 2. Simpler Change Detection: With the advent of more powerful and efficient change detection mechanisms, such as those provided by Reactivity systems (e.g., RxJS, signals), the need for ZoneJS decreases. 3. Increased Flexibility: Removing ZoneJS gives developers more control over when and how change detection is run, allowing for finer optimization and less reliance on a global mechanism. 4. Modern JavaScript Capabilities: JavaScript has evolved, and modern features like async/await and better promise handling reduce the need for a library like ZoneJS. In essence, removing ZoneJS aligns Angular with modern web development practices, aiming for improved performance, simplicity, and flexibility. However, such a move would also require careful consideration of how developers can effectively manage change detection and error handling in its absence.
And according to Gemini, May 5, 2024... Q: Please briefly explain what ZoneJS does in the first place, and why on God's green earth would the Angular team remove it from their ecosystem. A: Zone.js is a library that creates special execution contexts in JavaScript, kind of like mini-environments. In Angular, these contexts (called zones) help track changes within an application and ensure the view stays up-to-date. It intercepts things like asynchronous operations to make sure everything is in order. So why get rid of it? Well, Zone.js can add some overhead, and the Angular team is looking for ways to make their framework faster and more lightweight. They're also working on improving Angular's change detection so it might not need Zone.js as much anymore. It's important to note that Zone.js is still supported in Angular, but the team discourages using it outside of Angular applications. And who knows, maybe someday it won't be needed at all.
The shimmer loading module is not working. If anyone fixed this "npm install ngx-shimmer-loading" on v18 please update me on how to fix it even though I tried this "npm i ngx-skeleton-loader" but it is also not working.
Can anyone tell me if it's ok to continue to use observables with template async pipes rather than signals? Do you gain anything with signals? I just prefer using rxjs to signals.
They consider not only working on performance optimization, if there is one thing they have lost ground on, it is how most developers perceive Angular, as a complex framework with a difficult curve. What can start the change is components from a single file Home.angular that has javascript, css and html, there will no longer be a gap in what other frameworks consider easy with svelte, vue and now Astro.
No, you don't have to use lazy loading. You can configure lazy loaded routes or use something like the new @defer syntax. Also, NgModules are optional and the team recommends using standalone components.
With firebase hosting I can manage multiple environments by having multiple firebase projects and just clone my deployed app from one project to the other with `firebase hosting:clone myrpoject-dev:live myrpoject-prod:live`. How can I do something similar with app hosting?
Gosh I've been using angular on a basic level for 3 years now and still barely understand a word of what they're talking about. Can anyone recommend ways to learn Angular fundamental concepts better?
Same same, thou art not alone! :) That's why I've been using both ChatGPT and Gemini... like, A LOT. You might ask either one, "hey, just what in the world is this Angular "reactivity" all about???" Your results mileage may vary.
Will 18 have the long needed request and response di tokens needed for ssr? This is preventing us from coming off Angular Universal EDIT: I’m getting frustrated my comment was just ignored
But what will be the cost of zoneless Angular application? Signals everywhere? I don't want to use Signals everywhere. A number should stay a number (const n = 3) and not const count = signal(3);. Will a zoneless be possible without Signals everywhere?
No. Change detection will be triggerede by : 1) signals updates, 2) user events (click etc), 3) async pipe updates (so, Observable streams) if you use OnPush (and you are, for sure right?), and 4) manually calling changeDetection.markForChanges()
Zonless does not mean you can't refference variables in the template. If you have a constant then that constant won't change so it does not have to be a signal.
@@LarsRyeJeppesen Then this is trash ... they should find a solution to improve their change detection, not putting Signals everywhere ... Time to look for another framework ?
@@_Greenflag_ what's wrong with Signals? You will soon get best change detection of all frameworks, down to the div. All frameworks except React now use Signals. React is much worse, using the clunky hooks to change detect.
You don't have to make everything a signal at all. If you don't think it's going to change and you don't care about the changes in the template, you can just keep making primitives as class properties for sure.
So zoneless reduces package size and isn't really needed in a application fully using onPush change detection, and signals. I don't really see why zoneless is a big deal. What benefit does it add? Can someone explain how this makes my site better? I understand how zones are used now, and when we use outside zone for infinite scroll. I'm just not understanding how removing them from the entire site makes a big difference. I guess it forces you to use certain patterns... so It pushed your dev team to use better state management and change detection. But if I'm already doing that whats the real advantage.
Migration to new build system isn't documented well. Now I spent week for migration. Most of changes made after looking through the source of involved libraries of devkit. I am very sad that angular don't provide way to tune build process, in this case very helpful angular-builders library.
@@marktechson Also i wish to view documentation about integrating libraries with WebWorkers, i.e. PdfJs, Monaco Editor. For now it looks imposiible or very ugly from the box
I really don't like executing signal functions to get the value in the template. It makes it harder to skim/read the code if there are multiple uses for calling functions, previously if something was called in the template it was a public method, now it could be either a public method or a Signal which means we need another `$convention()` to recognise. Would be better to have a `value | signal` pipe, or just build it into the language to call on the render cycle if the value is an instance of Signal. If you're going make such a significant change go all in.
Black background in the editor showing examples is not good, parenthesis and other characters are pretty much not visible! Please improve this for the next videos. Great features! I have signals working in production today! :)
Angular v17 was the best angular version I'm ever worked with, can't even imagine what v18 now brings to the table
I can really relate. So many good things brought to the table and it’s really a joy to use it. By what i read it will even be better
V17 was just incredibly nice, let's see..
Most is under the hood (zoneless) and it's amazing. The best "developer side " feature are imho: form component event stream (amazing amazing amazing).
i concur. v17 was a game changer. We are super excited to see where the “ angular renaissance “ is going
The new control flow and forced move to stand alone component is amazing. The only thing that’s still annoying is change detection and if they make that work better then we’re in business
Awesome release. 😊 Here are the highlights I found (timestamps below):
- zoneless change detection is available in experimental mode, not developer preview. Community libraries are often not compatible with it (yet)
- it will be possible to develop libraries in Angular independently if they will be used on a Zone or Zoneless application
- new Angular 18 will use Hybrid change detection by default
- forms and router will be integrated with signals
- Angular material components now support SSR Hydration
- SSR Hydration support for i18n in developer preview
- SSR rendering mode selection for routes - we will be abot to configure which routes are rendered on the client only, on the server, or at build time
- Material 3 is available, Material 2 themes still supported
- Signal-based APIs: input, output, model, viewChild, viewChildren, contentChild, contentChildren
- Typescript upgraded to 5.4
- default ng-content is available
- new forms events observable
Timestamps
00:00 Intro
1:17 Zoneless Angular
4:43 Hybrid change detection
6:56 enhanced support for SSR hydration
9:46 Material 3
12:10 new Signal-based APIs
16:27 default ng-content
16:41 forms event observable
I just bought ur typescript and angular course on udemy. I hope u will update the course to angular 18 too❤
Sir/mam I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
@@FED_workerz Depends on the the region, check on your home region the job ads for a few months to get an idea, check online too.
Y'all have improved so much in so many ways. Congrats, team!
Best parts of angular 18 are
- Singla inputs (input())
- Model inputs (model())
- Signal query (viewChildren)
- Material 3 theming
- Angular forms global observable
Minus the childish material. Clearly that team needs an adult.
Performance ✅
Developer Experience ✅
Vibe ✅
amazing new features ! Hey Mark Thompson I wasn't familiar with your shoe game .. keep it up !!
Angular momentum continues ❤
I love what the Angular team is doing. Great job guys.❤
The timeliness of the Angular team in delivering a backward compatible framework with transition focused changes is worth applauding 🎉🎉
Thanks for all the hard work Angular Team
Thank you Angular Team!
Really excited for the TypeScript updates!
We have been using TypeScript since the early days - we stay locked in!
Sir/mam I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
Thank you so much for giving so much new new functionalities in new version from angular 14-15-16-17... bcs of that i am very excited to learn new things... also i think angualr will be going to the bummmm......in market in feature bcs of new functionalities
Hell yeah, excited to see what's coming!
That's a step in the right direction. Thank you team 😁👏
Angular Renaissance is a banger! Totally the best framework on the market, love u guys
in my opinion, signals and zoneless apps are a game changer for angular development. great time to build angular apps
We agree :)
game is over for angular
Another incredible update. Angular goes strong!
Congratulations team! Excelent work!
Great news, improvements and announcements! Well, it's time to make some application with the new Angular 🚀
🎉 Keep getting better!
Great updates! Much appreciated.
Time to learn v.17 and we have 18! Great team! 💪 Angular I trust in you! ;)
I love the final part of partial hydration. Very representative! Good job Angular folks!
so with zoneles, a signal (or computed/effect) contains the logic to trigger the change detection for the component if it's marked dirty?
Love the video recording quality 💪
thanks for all Angular team
So do we still need onpush strategy for zonless?
Angular 17, the ability to respond to the compilation & cli, just incredible! I have never enjoyed working with Angular so much. I'm imagining v18 now.
will you mind explaining in laymen terms how is that incredible ? Like what ease does it bring to developers ?
@@maksadTohBhoolChuka How These Changes Help Developers:
- Less setup and faster builds allow for rapid feature development.
- Faster builds and optimized performance enhance application efficiency, improving the user experience.
Before v17 it took more time than that, especially for our large applications with hundreds of modules. Currently even the live reload is very fast 🚀🚀
Can't wait for Angular 19 next month^^
Great work guys!
Sir I am college student i am learning front end developer I know html and css and javascript and typescript I confused react vs Vue vs angular which one is best but I like angular then I have one daut angular demand in future? How many percentage job opportunities in angular?
You never go wrong with angular
😘
Really cool changes and improvments. I'm really looking forward for the zonelessness of Angular. Though I'm kind of sad, that the server.ts file is still ignored when serving. Would be huge for adding oidc to angular applications directly without any other technically unnecessary api. Thanks for the framework
Love these updates !
is there any more info about Angular forms global observable?
I am still dealing with version 12. Is it difficult for me to move to the latest version? Is there a radical change in certain things?
We have an update guide at angular.dev/update-guide that can give you some insights on the move from 12 to the latest version. Since 12 we've added signals, SSR, @defer, new control flow, standalone components (option modules) and more. Lot's of new features to enjoy.
ouch. upgrade version by version, don't jump versions, is all I can say.
Thanks for all your work guys ! gg
I love the way we write angular template directive now. angular 18 features also next level for us.
Maybe it's kinda dumb, but can comeone explain briefly what ZoneJS does in first place? And why is Angular getting rid of it? :3
According to ChatGPT 4o, May 5, 2024...
Q: Please briefly explain what ZoneJS does in the first place, and why on God's green earth would the Angular team remove it from their ecosystem.
A: ZoneJS Overview:
ZoneJS is a library that provides a way to track and intercept asynchronous operations in JavaScript. It essentially creates execution contexts called "zones" that wrap around asynchronous operations like setTimeout, promises, or AJAX calls. When an asynchronous task is completed, ZoneJS can trigger change detection to update the view, making it particularly useful in frameworks like Angular.
Key Functions of ZoneJS:
1. Automatic Change Detection: ZoneJS helps Angular know when to update the view by automatically triggering change detection after any asynchronous operation completes.
2. Error Handling: It provides a centralized place to handle errors from asynchronous operations.
3. Task Tracking: ZoneJS can keep track of long-running tasks, helping to identify potential performance bottlenecks or memory leaks.
Why Would Angular Remove ZoneJS?
The Angular team considered removing ZoneJS for several reasons:
1. Performance Improvements: ZoneJS can add overhead to applications because it wraps many asynchronous APIs, which can impact performance. Removing it could make Angular applications faster and more efficient.
2. Simpler Change Detection: With the advent of more powerful and efficient change detection mechanisms, such as those provided by Reactivity systems (e.g., RxJS, signals), the need for ZoneJS decreases.
3. Increased Flexibility: Removing ZoneJS gives developers more control over when and how change detection is run, allowing for finer optimization and less reliance on a global mechanism.
4. Modern JavaScript Capabilities: JavaScript has evolved, and modern features like async/await and better promise handling reduce the need for a library like ZoneJS.
In essence, removing ZoneJS aligns Angular with modern web development practices, aiming for improved performance, simplicity, and flexibility. However, such a move would also require careful consideration of how developers can effectively manage change detection and error handling in its absence.
And according to Gemini, May 5, 2024...
Q: Please briefly explain what ZoneJS does in the first place, and why on God's green earth would the Angular team remove it from their ecosystem.
A: Zone.js is a library that creates special execution contexts in JavaScript, kind of like mini-environments. In Angular, these contexts (called zones) help track changes within an application and ensure the view stays up-to-date. It intercepts things like asynchronous operations to make sure everything is in order.
So why get rid of it? Well, Zone.js can add some overhead, and the Angular team is looking for ways to make their framework faster and more lightweight. They're also working on improving Angular's change detection so it might not need Zone.js as much anymore.
It's important to note that Zone.js is still supported in Angular, but the team discourages using it outside of Angular applications. And who knows, maybe someday it won't be needed at all.
It's awesome can't wait to update my project on 18 😊
Excited to upgrade my apps into angular 18 🎉
Tell me please that there is new features not mentioned in angular spring camp yesterday 😢
The shimmer loading module is not working. If anyone fixed this "npm install ngx-shimmer-loading" on v18 please update me on how to fix it even though I tried this "npm i ngx-skeleton-loader" but it is also not working.
Thank you. Can't wait to try material styling
By disabling zones, will that affect performance for applications that do not use zones?
Can anyone tell me if it's ok to continue to use observables with template async pipes rather than signals? Do you gain anything with signals? I just prefer using rxjs to signals.
Just switched to Angular. I am excited )))
Welcome!
any chance these t-shirts are available for purchase ? ♥️
We need full hydration support in this hot summer
As always excited 😅
We just moved to 17😢
That's totally fine - when you are ready for v18, we'll be waiting for you :)
I swear . 🥵🤒😔
Yes they will be waiting for you with new release 19
The crucial missing bit is whether you moved from 16 or from 18 back to 17?
Woah, nice!
Does ZoneLess experimental is compatible with existing App? or do i need to have newly App from scratch?
Upgrade to 18 and then you can add it.
I have an issue - routing doesn't work anymore on Angular18 while on Angular17 it worked perfectly :(
I was going say that Mark has been hanging with Jessica way too much with all those puns in the beginning, and then she showed up, I knew it !!!! 🤣
Definitely rubbing off on the entire team with all the puns lol
Excited
iam new to angular, should i use v18 ? if yes, where is my guide ? any article or playlist to build a real world app ?
Yes, you should go with Angular 18. Check out the official docs for quality up-to-date guide.
Server component are there?
Nice presentation
They consider not only working on performance optimization, if there is one thing they have lost ground on, it is how most developers perceive Angular, as a complex framework with a difficult curve. What can start the change is components from a single file Home.angular that has javascript, css and html, there will no longer be a gap in what other frameworks consider easy with svelte, vue and now Astro.
When will they add a turbo package?
Where can I get one of this awesome Angular t-shirt?
Thank you.
Does angular 18 need to use lazy loading? Because ngmodules are removed, please Help me !!!
No, you don't have to use lazy loading. You can configure lazy loaded routes or use something like the new @defer syntax.
Also, NgModules are optional and the team recommends using standalone components.
Will you update Tour of Heroes and the other tutorials, with some of the new features?
We will be updating our tutorial lessons with new features soon
With firebase hosting I can manage multiple environments by having multiple firebase projects and just clone my deployed app from one project to the other with `firebase hosting:clone myrpoject-dev:live myrpoject-prod:live`. How can I do something similar with app hosting?
🔥 keep going!
Gosh I've been using angular on a basic level for 3 years now and still barely understand a word of what they're talking about. Can anyone recommend ways to learn Angular fundamental concepts better?
Same same, thou art not alone! :) That's why I've been using both ChatGPT and Gemini... like, A LOT. You might ask either one, "hey, just what in the world is this Angular "reactivity" all about???" Your results mileage may vary.
What topics should be covered in Angular for beginners, and which version should beginners learn?
Nothing can beat v17 😊
cli broke my amplify deployment this morning, joys of that slow to update linux image
Delivery momentum at it’s best
Will 18 have the long needed request and response di tokens needed for ssr? This is preventing us from coming off Angular Universal
EDIT: I’m getting frustrated my comment was just ignored
Yeah, i love anguar but broken server.ts in ssr happened that we still on v16 in our company and waiting for fix
@@zygas15 yeah us too. Looks like we’ll have to upgrade from Angular 16 to Angular 19 at this rate
You can create and provide the tokens yourself via your express server, I myself have a multi app SSR setup with fastify
But what will be the cost of zoneless Angular application? Signals everywhere? I don't want to use Signals everywhere. A number should stay a number (const n = 3) and not const count = signal(3);. Will a zoneless be possible without Signals everywhere?
No. Change detection will be triggerede by : 1) signals updates, 2) user events (click etc), 3) async pipe updates (so, Observable streams) if you use OnPush (and you are, for sure right?), and 4) manually calling changeDetection.markForChanges()
Zonless does not mean you can't refference variables in the template. If you have a constant then that constant won't change so it does not have to be a signal.
@@LarsRyeJeppesen Then this is trash ... they should find a solution to improve their change detection, not putting Signals everywhere ... Time to look for another framework ?
@@_Greenflag_ what's wrong with Signals? You will soon get best change detection of all frameworks, down to the div. All frameworks except React now use Signals. React is much worse, using the clunky hooks to change detect.
You don't have to make everything a signal at all. If you don't think it's going to change and you don't care about the changes in the template, you can just keep making primitives as class properties for sure.
Learning angular 17 coming out of app config from app module ufff now 18
So zoneless reduces package size and isn't really needed in a application fully using onPush change detection, and signals. I don't really see why zoneless is a big deal. What benefit does it add? Can someone explain how this makes my site better? I understand how zones are used now, and when we use outside zone for infinite scroll. I'm just not understanding how removing them from the entire site makes a big difference. I guess it forces you to use certain patterns... so It pushed your dev team to use better state management and change detection. But if I'm already doing that whats the real advantage.
I'm just waiting for ng-bootstrap to start supporting this version to do an upgrade
Migration to new build system isn't documented well. Now I spent week for migration. Most of changes made after looking through the source of involved libraries of devkit. I am very sad that angular don't provide way to tune build process, in this case very helpful angular-builders library.
This is good feedback. Will share with the team.
@@marktechson Also i wish to view documentation about integrating libraries with WebWorkers, i.e. PdfJs, Monaco Editor. For now it looks imposiible or very ugly from the box
go angular!
Excited to start using the new Angular version - 18!
I really don't like executing signal functions to get the value in the template. It makes it harder to skim/read the code if there are multiple uses for calling functions, previously if something was called in the template it was a public method, now it could be either a public method or a Signal which means we need another `$convention()` to recognise. Would be better to have a `value | signal` pipe, or just build it into the language to call on the render cycle if the value is an instance of Signal. If you're going make such a significant change go all in.
The hydration devtools is revolutionary
Alguien tiene algun proyecto de e-commerce con angular 17, pero utilizando 100% signal?
Love those puns XD
Fantastic
great stuff, GOD BLESS HOLY NG
Your asking me to cheat on v17 already!
😅we'd never suggest that lol buuuuuut you can have peak at what we're shipping in v18 and then decide if it's the right time to update :)
Lets go!
I wonder if Google will someday make an Angular Professional Certificate in their Google career Certificate program 😂
Commooon don’t destroy years of development around the world with these breaking changes.
The changes aren't breaking, actually - you can upgrade and not use anything until you want to.
I am imagining myself as a developer and maintainer of zonejs
omg i found the one piece 😱 4:44
I'll wait for Angular 19
What could we release in 19 that you are waiting for?
6:33 that's how I trying to keep my app with new version of angular and fix all the issues with all the libs around......... uffff....
Black background in the editor showing examples is not good, parenthesis and other characters are pretty much not visible! Please improve this for the next videos. Great features! I have signals working in production today! :)
We already moved to zoneless from V18 RC1 :) works perfectly if your 3rd party libs allow it
Great point and we'll definitely fix that for the next videos! Sorry for the inconvenience.
🎉🎉🎉
02:37 "next 10 years of Angular"
burried next day by Google
I want your tee-shirt Mark :)
Still lagging behind vue...
wo waiting for angular signal use cases