What’s new in Angular v18

[@msjahun]

Angular v17 was the best angular version I'm ever worked with, can't even imagine what v18 now brings to the table

[@qwerty-or1yg]

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

[@Seppelicius]

V17 was just incredibly nice, let's see..

[@LarsRyeJeppesen]

Most is under the hood (zoneless) and it's amazing. The best "developer side " feature are imho: form component event stream (amazing amazing amazing).

[@aashilrahmanvallanchira7805]

i concur. v17 was a game changer. We are super excited to see where the “ angular renaissance “ is going

[@asjsjsienxjsks673]

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

[@aayush-d-r9f]

Angular 18 updates: TypeScript 5.4 support Defer views (lazy loading of dependencies) moved from developer preview to stable stage Route redirects with functions: more flexible and opens up new possibilities in routing management New redirect command: enhances redirection capabilities within guards and resolvers Zone-less change detection: change detection operates independently without intermediaries like zone.js Template local variable with @let block Core improvements: ongoing efforts to refine change detection, rendering, and dependency injection Enhanced Angular DevTools: various enhancements to debugging tools for simplifying the debugging process Improved forms API: several upgrades to streamline form creation and validation Upgraded in-template API: simplifies template creation and utilization Support for web components Enhanced internationalization capabilities Introduction of a new router API

[@AngularUniversity]

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

[@edwin2162]

I just bought ur typescript and angular course on udemy. I hope u will update the course to angular 18 too❤

[@FED_workerz]

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?

[@AngularUniversity]

@@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.

[@msjahun]

Best parts of angular 18 are - Singla inputs (input()) - Model inputs (model()) - Signal query (viewChildren) - Material 3 theming - Angular forms global observable

[@rockenOne]

Minus the childish material. Clearly that team needs an adult.

[@AfolabiJude]

The timeliness of the Angular team in delivering a backward compatible framework with transition focused changes is worth applauding 🎉🎉

[@johalternate]

Performance ✅ Developer Experience ✅ Vibe ✅

[@DaviMello]

Y'all have improved so much in so many ways. Congrats, team!

[@cachabacha03ify]

amazing new features ! Hey Mark Thompson I wasn't familiar with your shoe game .. keep it up !!

[@vladimirlebedev00010]

Angular Renaissance is a banger! Totally the best framework on the market, love u guys

[@VinitNeogi]

Angular momentum continues ❤

[@JakubGaniaSoftware]

Great news, improvements and announcements! Well, it's time to make some application with the new Angular 🚀

[@yufgyug3735]

in my opinion, signals and zoneless apps are a game changer for angular development. great time to build angular apps

[@marktechson]

We agree :)

[@cenkakay3506]

game is over for angular

[@jayeshpobari6565]

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

[@joeng5999]

I love what the Angular team is doing. Great job guys.❤

[@maamouribilel]

That's a step in the right direction. Thank you team 😁👏

[@ErQuinto86]

Time to learn v.17 and we have 18! Great team! 💪 Angular I trust in you! ;)

[@amosisaila8416]

I love the final part of partial hydration. Very representative! Good job Angular folks!

[@shaundai]

Really excited for the TypeScript updates!

[@marktechson]

We have been using TypeScript since the early days - we stay locked in!

[@FED_workerz]

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?

[@digitalsouag8055]

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.

[@maksadnahibhoolna-wc2ef]

will you mind explaining in laymen terms how is that incredible ? Like what ease does it bring to developers ?

[@digitalsouag8055]

@@maksadnahibhoolna-wc2ef 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 🚀🚀

[@summers173]

Thanks for all the hard work Angular Team

[@TrainYourDragon999]

thanks for all Angular team

[@Simon-yf7fo]

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

[@niloybarmon7975]

I love the way we write angular template directive now. angular 18 features also next level for us.

[@SMRafi-tw2oh]

Excited to upgrade my apps into angular 18 🎉

[@mindget]

Another incredible update. Angular goes strong!

[@lindermannla]

Congratulations team! Excelent work!

[@foxdie8106]

Thank you Angular Team!

[@mikhailratner4649]

Hell yeah, excited to see what's coming!

[@atpayero]

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.

[@juristr]

Love the video recording quality 💪

[@anoyq56]

We need full hydration support in this hot summer

[@gacheandrei1771]

Can't wait for Angular 19 next month^^

[@async_7]

We just moved to 17😢

[@Angular]

That's totally fine - when you are ready for v18, we'll be waiting for you :)

[@tafawa361]

I swear . 🥵🤒😔

[@underTaker-d2q]

Yes they will be waiting for you with new release 19

[@aram5642]

The crucial missing bit is whether you moved from 16 or from 18 back to 17?

[@Aarishkhan18]

It's awesome can't wait to update my project on 18 😊

[@aj8__8]

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 !!!! 🤣

[@marktechson]

Definitely rubbing off on the entire team with all the puns lol

[@sergiitrotsenko]

Thank you. Can't wait to try material styling

[@iuriius]

Just switched to Angular. I am excited )))

[@marktechson]

Welcome!

[@taiwokazeem9014]

You never go wrong with angular 😘

[@mohammed-algazali]

Tell me please that there is new features not mentioned in angular spring camp yesterday 😢

[@async_7]

So do we still need onpush strategy for zonless?

[@CeezGeez]

so with zoneles, a signal (or computed/effect) contains the logic to trigger the change detection for the component if it's marked dirty?

[@alexgonzalez85]

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

[@BenWilliams7]

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.

[@BenWilliams7]

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.

[@Jaber_Dev]

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?

[@Angular]

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.

[@LarsRyeJeppesen]

ouch. upgrade version by version, don't jump versions, is all I can say.

[@TomOliverTurtle]

Nothing can beat v17 😊

[@marshalldev]

Delivery momentum at it’s best

[@goombagrenade]

Great updates! Much appreciated.

[@joshualomasbrannigan896]

cli broke my amplify deployment this morning, joys of that slow to update linux image

[@AJITHSPUNALUR]

Excited to start using the new Angular version - 18!

[@developeroppa]

I'm just waiting for ng-bootstrap to start supporting this version to do an upgrade

[@michaelfaith]

Great work guys!

[@FED_workerz]

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?

[@sajithmadusanka2028]

Nice presentation

[@ali-celebi]

🎉 Keep getting better!

[@Sanjism-y9k]

Thanks for all your work guys ! gg

[@deepeshSolankii]

Excited

[@SaiKrishna7149]

Learning angular 17 coming out of app config from app module ufff now 18

[@saiphaneeshk.h.5482]

The hydration devtools is revolutionary

[@amrabdulaziz2253]

Commooon don’t destroy years of development around the world with these breaking changes.

[@marktechson]

The changes aren't breaking, actually - you can upgrade and not use anything until you want to.

[@jeverydk]

Will you update Tour of Heroes and the other tutorials, with some of the new features?

[@Angular]

We will be updating our tutorial lessons with new features soon

[@SmithLikeYou]

What topics should be covered in Angular for beginners, and which version should beginners learn?

[@MohammadKamran-mo8pj]

Thank you.

[@ViralB0t]

Angular is My favourite language❤

[@100aiseutepego]

When will they add a turbo package?

[@CodingAbroad]

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

[@zygas15]

Yeah, i love anguar but broken server.ts in ssr happened that we still on v16 in our company and waiting for fix

[@CodingAbroad]

@@zygas15 yeah us too. Looks like we’ll have to upgrade from Angular 16 to Angular 19 at this rate

[@qyihamba7034]

You can create and provide the tokens yourself via your express server, I myself have a multi app SSR setup with fastify

[@poloolo69]

any chance these t-shirts are available for purchase ? ♥️

[@danielzaiser]

omg i found the one piece 😱 4:44

[@angularfireman5895]

Your asking me to cheat on v17 already!

[@Angular]

😅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 :)

[@GlauberFarias]

Where can I get one of this awesome Angular t-shirt?

[@andriideiak4323]

Love these updates !

[@JacobBennett-wy3ei]

By disabling zones, will that affect performance for applications that do not use zones?

[@doom-hell]

I'll wait for Angular 19

[@marktechson]

What could we release in 19 that you are waiting for?

[@ghostinplainsight4803]

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.

[@100aiseutepego]

Server component are there?

[@innocentmazando3808]

I am imagining myself as a developer and maintainer of zonejs

[@yashrajdawkhar7727]

As always excited 😅

[@Delagenus]

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]

This is good feedback. Will share with the team.

[@Delagenus]

@@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

[@jay-j6l]

keep up the great work of making angular more complex, this will help to keep this bloated framework out of reach for many

[@Angular]

But we reduced the complexity 😢

[@arkeynserhayn8370]

​@@Angular Whoever runs this channel, i wish you best in life

[@agent-01-dl9un]

Does ZoneLess experimental is compatible with existing App? or do i need to have newly App from scratch?

[@marktechson]

Upgrade to 18 and then you can add it.

[@federicobalboa9145]

go angular!

[@canergurelsoy6875]

great stuff, GOD BLESS HOLY NG

[@jean-sebastienb.1613]

I want your tee-shirt Mark :)

[@AhmedElemam-ju5if]

iam new to angular, should i use v18 ? if yes, where is my guide ? any article or playlist to build a real world app ?

[@marflage]

Yes, you should go with Angular 18. Check out the official docs for quality up-to-date guide.

[@DaveyCodes]

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?

[@BenWilliams7]

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.

[@michalbugajski]

Woah, nice!

[@WilliamIT2000]

Hi everyone, i am beginner. So, i have some difficulties but i will try harder ;))

[@paweld.9542]

I have an issue - routing doesn't work anymore on Angular18 while on Angular17 it worked perfectly :(

[@patricsteiner8483]

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?

[@zainulabdin9756]

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.

[@fyardlest1]

I wonder if Google will someday make an Angular Professional Certificate in their Google career Certificate program 😂

[@jeanpierrepachecoavila5484]

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! :)

[@LarsRyeJeppesen]

We already moved to zoneless from V18 RC1 :) works perfectly if your 3rd party libs allow it

[@marktechson]

Great point and we'll definitely fix that for the next videos! Sorry for the inconvenience.

[@tarquin161234]

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.

[@_Greenflag_]

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?

[@LarsRyeJeppesen]

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()

[@MrBloodWoork]

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.

[@_Greenflag_]

@@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 ?

[@LarsRyeJeppesen]

@@_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.

[@marktechson]

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.

[@Psych0mxmx]

Alguien tiene algun proyecto de e-commerce con angular 17, pero utilizando 100% signal?

[@Miguelmc98]

Lets go!

[@andrewkolansky5348]

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.

[@it-s-me-mohit]

🎉🎉🎉

[@_cipriangg_]

Love those puns XD

[@SmileyJack.]

02:37 "next 10 years of Angular" burried next day by Google

[@ANTONZUBAREV]

Fantastic

[@mohamedmatar5878]

🔥 keep going!

[@DamianSireDesarrollo]

🔥🔥🔥🔥🔥🎉

[@Angular]

We're just as excited!