State of Angular

Learn about the latest from Angular, including updates on standalone components, an API simplification strategy for the web. Discover everything from community updates and the request for comments process to new features landing in v14 and beyond!
Speakers: Mark Thompson, Emma Twersky
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 technical sessions → goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@anitsingh9373]

"Changing the engine of the car while its still running" I can feel the amount of hardwork behind the shift. Really well done #Angular Team 🔥❤️

[@RifanFirdhaus]

😍😍😍

[@RifanFirdhaus]

🙄

[@RifanFirdhaus]

Q

[@RifanFirdhaus]

👍🏻👸

[@twerske]

Thank you!! Glad you're enjoying the latest updates!

[@luistchitue3481]

Thanks Google for offering the world such a valuable technology.

[@michaelfaith]

The multi-version migration to Ivy was so brilliantly executed. The amount of forethought and the solid long-term vision was so impressive. All to maintain backwards compatibility and ease the burden on product teams. Bravo.

[@martijnvanturnhout]

Thanks for all these additions! The future looks great. I'm still very much looking forward to the day you'll introduce official Angular micro-frontend options!

[@LuLeBe]

What is a micro-frontend? Sorry, I've used AngularJS years ago and then some Vue but no frameworks since, so I'm not familiar with that term. What is it? How does it differ from just not using a framework?

[@DEVDerr]

Finally someone thought about doing major change backward-compatible and non-breakable. It's very rare in our weird JS ecosystem. Keep on great work 💪

[@Matt-hs5jm]

*cough* react *cough*

[@BorisPrpic]

Thanks for supporting Firefox! (DevTools)

[@otmanm4095]

As a salo entrepreneur, Angular is super for me, it may seems steep from some aspect and is sometimes, though, its smooth overall and I love it

[@Ostap1974]

Thank you for all the effort put into the framework. While the new features are cool, it would also be great if the team would find some time to work on really old and annoying shortcomings, like fpr example missing full-app file name hashing or minimized shared stylesheet.

[@memeguyTM]

I have a career thanks to Angular so I can't thank you folks enough!

[@sahilmahna7175]

Thanks for all this hard work. Really exited to implement these features in my next project…

[@markthompson-g]

Be sure to let us know how it goes!

[@TheRealJacobWurz]

Whenever I need to reference the material doc's I do feel like at least that part of the Angular documentation is half-done. The documentation is clean and crisp and sells it well; however, I usually can't get a material working through just those docs alone. Regardless good video and exciting thing aheads for Angular!

[@TayambaMwanza]

That's new for me, I usually get material working with docs and examples tab, can you give example of what you mean? Just curious.

[@TheRealJacobWurz]

@@TayambaMwanza sure one example is a mat-datepicker is currently causing my component to be a blank page. I have to use a regular old html datepicker. It's probably something simple I'm just not aware of I've had similar issues with multiple materials where I just have to do some small tweak to get it to work, or some materials like mat-badge won't appear with a custom theme while others materials will show up with a default custom theme

[@twerske]

Thanks for watching Jacob! I'd love to chat more about the Material docs. Datepicker actually had a ton of fixes in the upcoming v14 so I want to make sure the docs help you utilize it's enhanced accessibility (and get you up and running smoothly). A GitHub issue might be a good place to triage this together.

[@Matt-hs5jm]

Material Ng is hilariously bad. It's embarrassing how much better the React MUI implementation is than the Angular one given Material came from Google

[@TayambaMwanza]

@@Matt-hs5jm examples?

[@skozombie]

New features are great, fixing the backlog of bugs is better. There are still CDK bugs breaking drag and drop from NG11. A stable, bug free platform is far more important than a fancy one

[@daviidon]

The corporate culture rewards it...shipping fancy new features could land you a promotion, fixing a year old bug is not that exciting...

[@markthompson-g]

Thanks for this comment. It's honest and we can appreciate that.

[@skozombie]

@@markthompson-g No worries mate! I appreciate all the work the Angular team does :) There's a very low defect rate for the size of the code base so the team has done really well, it's just always that rare bug that you notice because of that! Keep up the great work and I look especially forward to the revamped documentation! It's always the "unsexy" things that make all the difference!

[@ВоваМагдич-к5ю]

Thanks for u work. I am really happy that choose Angular.

[@twerske]

Thank YOU!

[@giorgimerabishvili8194]

Angular is the most accomplished framework out there!

[@kevinchristophergarciamart6065]

Typed forms.. finally!

[@markthompson-g]

So exciting, right?!

[@savopejovic25]

I had made a copy of Angular Forms for my past jQuery work and it had typed forms (including Template Literal Types) from the get-go. Wonder what the complications for Angular were...

[@TayambaMwanza]

@@savopejovic25 Apparently it would break some stuff in Google, updating types causes the most bugs to surface and in google environment if you break it you fix it.

[@Matt-hs5jm]

Angular "we use typescript" - uses literals and any types all over the place. Why are people getting excited about features that should have existed years ago?

[@kass160]

This is exciting.

[@rishabhgusai96]

Hydration is important or everyone will switch to React + Next.js stack for SEO dependent applications like E-Commerce.

[@ProsenjeetPaulProsenjeetPaul]

Angular firebase & firestore is much needed

[@markthompson-g]

Good point! I'll talk to David East and see what we can come up with :) Thanks for watching!

[@ikbo]

do teams at google communicate with each other? I mean there is another google web framework called lit.

[@FloKorp86]

One request I have is to compile a list of endorsed codebases of production ready, open source apps that use Angular as a reference to work off of. Oftentimes we are trying to research and compare approaches, but are lacking real world examples that could inspire us to build better applications. A few examples that come to mind are advanced state management with dependency injection, complex and interactive forms and last but not least: best practices surrounding OOP in Angular. I know a few apps are out there like NX or Nebular, but I'd like to see what you come up with

[@TenthFir]

Awesome work guys 🙌

[@kedevked]

I am excited as you to be an Angular developer 👌. Can't wait to see the integration with Google cloud in Minko talk. Thanks Emma and Mark !

[@markthompson-g]

We're super glad you are excited! Thanks for taking the time to watch this and thanks for being a part of the Angular community!

[@lowlandtech]

this 3:1 presentation format was really wonderful. Especially the mobile format video on the right. Does someone know if this was special software or just editing?

[@JazevoAudiosurf]

working with angular since 2016, I like it much more than other FE frameworks but I really think you need better documentation. I usually check your docs and then quickly proceed to stackoverflow because your docs and just incredibly high level and hard to understand. I just wanna code a website, not rocket science, just because you make it rocket science

[@christophernormanoliver8529]

Nice work! I wonder if the testing framework will get a bit of help or move away from Protractor?

[@TayambaMwanza]

I belive they are moving away as testing landscape changed/improved dramatically

[@martinaguilar6428]

Very amazing the new updates for Angular :3

[@practicaluseof]

Angular is great 💪

[@StephenMoreira]

Hello Angular my true love.

[@jalpeshvadgama]

Great work as always I am a fan of angular and now we have lots of things to vouch for angular o enterprise applications. Great to see developer tools and other things are coming up. Still I feel that lots of more work is required to be done in-browser dev tools.

[@solsolomon]

I like stand alone components, that will help. my developers prefer react.

[@bigbtripathi]

Can you implement feature to complie Angular to WebAssembly ?

[@_____case]

WASM support for garbage collection is still in the works. Until that is mature, applications that are written in GC'd languages cannot be ported to WASM. But to be honest, the JS engines in modern browsers are so sophisticated that there's not much to gain from that effort anyway. At least not yet.

[@TayambaMwanza]

Apparently there is an angular team member who loves wasm so you never know.

[@AliYar-Khan]

Can I upgrade from angular 4 to latest version

[@XXMEDXX]

Love the presentation

[@dayvie9517]

tbh, the part from Emma doesn't sound very nice or informative. It sounds like the *ZUCC* (which is probably not even her fault). But cool that there is a new Angular Version (from which I will learn more from the documentation and sadly not from Mark)

[@hieptran5553]

That really cool

[@twerske]

It is! Glad you enjoyed!

[@jeromemoulin5241]

So nice NEW !!! thx for this !!

[@markthompson-g]

We're so glad you are enjoying the updates :)

[@ITStars]

cool stuff , thanks alot

[@shambhunbelavatagi7713]

Why angular doesn't have feature like Redux? I love angular a lot.

[@fromulaon]

Angular DX is reaching React DX now.

[@markthompson-g]

Glad you like the updates - we're just getting started...great things are ahead!

[@thedelicatecook2]

In some aspects, angular is worse, by design, because it has an opinion and tries to solve way more problems than react. Hence, there is more you need to read and learn about before being really ready to start a large app. But in react, it really depends on what community modules you decide to include, so there is no single DX. In others, angular has been way ahead for a long time. Automatic updates with schematics is a BIG one for any company needing to maintain multiple large apps and keep them up to date. It applies code changes thanks to being invested in a very introspectable language and framework. React on that aspect, does not even has a single clear opinion on how to do the basic things. Should a team go from class based component to the more recent function base ones ? Yes, no, up to you, anyway there is no official tool to help if you whish to. This scenario is very different to how angular approaches these kind of issues. They make sure all apps can follow the most up to date opinionated recommendation and they build the tools for it. It may not matter for all teams and projects, but for maintainability of long term projects, angular seems to most advanced to me since angular 6 when schematics were introduced. What’s been your experience ?

[@Matt-hs5jm]

Hahahahaha. No, we improved frontend delivery speed 5x switching to a well designed React framework from modern Angular.

[@thedelicatecook2]

​@@Matt-hs5jm Thanks for your reply. Could you explain to me what you mean exactly by delivery speed: the bundle size ? the dev productivity ? or something else ? What part of the process was eating time in angular compared to React ? I am genuinly curious.

[@bonchonmaru]

My company is trying to modernize their product by moving over to Angular Angular 6, that is... T_T

[@TayambaMwanza]

What version are they on now?

[@samuelbaird4983]

Blows my mind that companies don't use the most recent LTS. Just asking for you app to get deprecated 5 years early

[@bonchonmaru]

@@TayambaMwanza a bit of aspx, some mvc, now there is a bit of hybrid mvc+angular. You can see all the attempted technology transitions. I think angular 6 may have been the latest when the company decided to hop on.

[@TayambaMwanza]

@@bonchonmaru the company I work for is still on angular 8, at some point things will stop working and lots of tooling actually saves time for devs so I've been regularly bringing up challenges due to old version to push upgradd

[@aaposso]

The company I work for still uses Angular 4 lol

[@valikonen]

I think it's a good idea when generate a new project to have option what you want to use from angular core. For example if I don't user forms I guess this is included in the production bundle.

[@krzysztofprzybylski2750]

Hey, just so you know forms module needs to be explicitly imported to your ngModule so they aren't included in your production bundle by default.

[@twerske]

Forms shouldn't be in the prod bundle unless you explicitly include and need them! Tree-shaking is definitely our best-friend here.

[@Fadi.nouh88]

Great work!

[@segatendo4705]

Came for Emma, stayed for Angular.

[@twerske]

Thank you!

[@oyemajaoyemade829]

🎉🎉🎉

[@dtnguyen75]

What? Michael Strahan joined the Angular team?

[@markthompson-g]

I mean, I can see how you could be confused. Both of us are tall, rich, and handsome 🙃

[@Eltopshottah]

Google is too cool for school

[@adityaghosalkar431]

Emma is beautiful

[@smallbeetube]

really a bit shocked by the complete rewrite, it's not the first time already, that's why I gave up angular. they just trash what you already learned, ignore your time and effort.

[@JBuchmann]

I really hate Angular modules, it can be really confusing. I'm so glad that's going away in favor of standalone components.

[@luftbaum8840]

In the beginning they confused me too, but once you get them it's pretty simple. Only thing is the amount of boilerplate it produces... other than that it allows you to structure your codebase rather nicely imo. Very good for scaling apps. Something I always struggled with other solutions like pure react or svelte. Angular kinda feels like the Java of web frontends / SPA's: Boilerplaty and strict but very reliable.

[@JBuchmann]

@@luftbaum8840 I often get in a situation where I want to import a component in 2 different modules, but you can't do that. So then you go the shared module route, but often get issues with that. Also it's a pain if you need to restructure folder locations of components and modules. Always feels like a lot of friction for me. Can't wait until I can just import a component into another one and not worry about modules. 😁

[@thedelicatecook2]

@@luftbaum8840 could not agree more, that’s exactly how I feel about it. For large projects being maintained over years in large teams, I find them a reliable tool to help scale an architecture. Part of me feels there should be a no-module option for solo devs and small / prototype projects, where everything is implicitly in an invisible module. A few projects I have seen simply never reach the complexity point where they actually got something from the module architecture, they just had to conform to it. To me there is a crossing point, after which it is more helpful/productive to split the app in modules. Maybe a schematics could let you opt-it at that stage to materialize the single module you had been working on to let you split it up however makes sens for the team. Anyway, good to reflect on this.

[@makepool]

Agreed, they're one of the reasons I prefer Vue. I mean yeah, you get used to dealing with modules but that's not as good as not having to deal with them at all.

[@JBuchmann]

@@makepool Vue is nice... and in many ways similar to Angular (like the data binding in the HTML). It's a perfect combination of the best of both Angular and React. And super easy to learn if you already know Angular.

[@minhluudinh5522]

Angular itself is amazing but Angular's official documentation sucks. As a beginner, I feel very confused with the examples

[@TayambaMwanza]

Compared to the other frameworks I find angular to be the most complete and appealing, although examples are complex, I believe they will start simplifying soon.

[@markthompson-g]

Did you see the Introduction to Angular workshop we just released for Google I/O? kzbin.info/www/bejne/p6nGmaWqZZmViqM

[@TayambaMwanza]

@@markthompson-g thanks I've saved it to check it out later, just an idea, it might be worth it on official documentation to have a the basic intro video in addition to text intro, most people learn faster that way anyway. Only problem is updating the video as angular evolves.

[@markthompson-g]

@@TayambaMwanza Goooood point! Let's see what we can do!

[@mentoriii3475]

​@@markthompson-g hi, im a React dev and have to switch to Angular soon for a project were doing at work, are the things that are mentioned in the video already applied such as documentation so i dont have to look for tutorials elsewhere

[@razorstone3088]

great video but I think you meant to say react

[@markthompson-g]

It IS a great video - thanks for watching!

[@Gstyle85255]

kinda sounds like a preflight instructions video

[@hayrikosem]

ClickUp really!!! It is one of the worst apps to be the face of your platform. It's buggy as hell and not reliable. Yes, it is full of features but they are all under developed.

[@Matt-hs5jm]

Sounds like honest advertising for Angular then?

[@akshattamrakar9071]

So, nothing about Universal again..

[@adamnowak7517]

10:40 I was wondering why ClickUp UI felt so laggy... It was probably a best practice.

[@StevenHartgers]

Firebase bragging with 1.4 million lines of code? At our company we call that bloat and feature creep 😅 Less is more as they say

[@twerske]

I agree more code doesn't always mean better code. The "What's New in Firebase" video on the Firebase KZbin channel shows how their codebase supports an incredible amount of complexity and features, I think it's pretty impressive.

[@JamesJansson]

Dang it typed forms... close. Hahaha

[@srinivasprasad837]

I hope angular will be as fast as react soon.

[@thedelicatecook2]

It is important to know that angular component performance can be quite fine tuned. Angular exposes a tree of change detectors, that by default, do a lot of work (change detection cycles), for you. But if you have a reactive architecture based on observable, which I love for performance and composability reasons, you can easily turn on “OnPush” change detection strategy on your component, getting huge performance gains, especially on large apps. It means you can get a big performance boost, opt-in. Also there are more opt-in performance improvements to be had, some dynamic list with benefit a lot from things like track-by or the angular CDK virtual scroll. Predictable high performance is one of the reasons I often chose angular. But some projects have specific performance requirements. Sometimes you need other tech like canvas, custom caching, webgl, web assembly… Angular is for the the typical web app, web dashboards, form based apps et … if you need highly animated, very dense and graphically designed apps, some higher effort, lower level tech are sometimes more suitable. Adapt the level of abstraction to the need of your project.

[@k.h.6991]

No reason for a solo dev to use angular. Just use vue. (but I understand that angular wants to catch up)

[@ryanquick4262]

I work with Angular every day. I despise Angular.

[@MrHamsterbacke756]

This seems to be pretty common.

[@i3looi2]

"Please stop. It's already DEAD !"

[@babakfp]

12:30 You are trying so hard to sell, but it's got gonna work since you are trying to make a big deal of a stupid feature! Did I understand it wrong? Isn't it all about being able to add a `` to your page?!

[@StephenPienaar]

The component title property makes it easy to have a unique title per route. By comparison, the in index.html is the default title for the whole application.

[@raghavkanwal]

It's a bit weird to showcase it as a future feature, really. I've been using the title in the route configuration since Angular 8, as far as I can recall, using the data property. So now we can just declare title outside of route data, It's such a miniscule change that one can't help but feel that the slides are just padded for content's sake.

[@TayambaMwanza]

@@raghavkanwal I think it can go both ways, it might not need to be there but is it really so wrong to mention it?

[@twerske]

In a single page app, in your html isn't dynamic to the routing of your app, which isn't accessible since we want each route to convey what is on the page. This change allows you to define titles in your Route config so that the title changes when you navigate to a new route!

[@twerske]

@@raghavkanwal I see what you mean, but I think it's a huge win for accessibility. You no longer need to custom import the TitleService and self-manage the route's data property, which is especially helpful for new developers who may not know they need to do this. It's a developer experience win, but I agree it impacts new developers more!

[@mako3010]

Zero reason to be using Angular in 2022

[@thedelicatecook2]

I can name plenty. As well as for other frameworks. What makes you think that ? Everyone selects tech stack differently based on the company’s size, experience, project need, the importance of various features in the context of a project, the available pool of developers in a given country etc. I find for example it is easier to interview and onboard angular devs than other frameworks as they are use to many single opinionated approaches of the framework, so there is less company-specific opinion to train to each new dev. Wether it is how to make animations, nestable forms, dependency injection or complex routing for example, all these topics have one clear opinion, API and doc, so new members can be productive faster that with other tech when joining a company or project. I could also say that for the maintainability of long term projects with all the schematics. It does not mean angular is the best for all projects, no, but I find it has very compelling reason to be used on 2022 in many projects.

[@thedelicatecook2]

Do you imply it has a major flaw that makes it a no go and which would it be ? Or is it that you think other frameworks are superior for all kinds of projects ? I genuinely want to know so I can learn for this exchange.

[@walterlol]

God, I hate Angular. Not intuitive.

[@markthompson-g]

We're making some changes to help with that. Hopefully things will seem more intuitive in the future. Thanks for the feedback

[@thedelicatecook2]

Is it the ngModules need and syntax ? The reactive forms ? The inclusion of rxjs by default ? All of it ? I think most of angular gets intuitive… after understanding the concepts behind, which there are quite a few, indeed. For large apps though, I think most of them are quite useful. I would say it is architectures for medium to large sized projects, hence it requires you to learn and invest on more concepts than other frameworks, to be able to support you on that size. Hence for small projects I sometimes recommend other frameworks. Or maybe when you say not intuitive you are referring to the naming and structure of the API itself ? In this case I suppose you prefer some APIs like Vue ? I find view tries to speak a more generic developer language instead of requiring developers to speak the language of the framework. I find react not necessarily more intuitive than angular when comparing the sub-scope it has in common with angular. The rendering aspects, the hooks, the need to sometimes useMemo, amongst other things, were all quite an intellectual investment before really productive. In the end I think it is important to make sure a framework will deliver enough benefits before investing a project in it. It is not always easy to know in advance.

[@Matt-hs5jm]

Even once you learn it, it doesn't get better. You can feel the money being burned as you spend 10 minutes to setup the boiler plate for another component that takes 3 seconds to write in React (literally just a function). The Material UI framework is horribly buggy, and so unintuitive it seems like a prank. The documentation for everything is abysmal. You find yourself glued into patterns that React developers realised were a terrible idea years ago. Angular does everything, but it does everything really badly. You could pick all the most popular React ecosystem libraries today, never update anything and in 5 years, still be in a better position than if you picked angular. RxJS is awesome...but makes no sense in a web-ui. An HTTP request is not a stream! It is a terrible abstraction. It adds boilerplate and nothing else. I could go on for hours.

[@walterlol]

@@Matt-hs5jm I picked up React in 2 weeks. I was able to do small projects and everything just clicked because it was intuitive. Angular introduces other things like decorators or pipes that are simply not in line with web development but backend devs.

[@detzey]

It's been a long time since I last developed an application with Angular. Watching this video reminded me why I left...

[@Matt-hs5jm]

Wow, Google just can't let go. Time to admit Angular is dead. New features to solve problems that they created in the first place. The module system serves no purpose. You literally have to import the ESModule then tell angular again that you are importing it. The only argument I ever hear anyone give in support of angular is 'hurdur enterprise blah blah'. A complete cop-out argument and doesn't come close to justifying the 5x reduction in productivity vs React based frameworks. Go tell the huge number of enterprises building React based apps that they need Angular and you will be laughed out of the room.

[@wilhallman2890]

Smashed the DISLIKE button because it's ABSURD to be putting people's pronouns in a video like this. How ludicrous.

[@patricknelson]

Yeah, uh… I don’t think it’s a big deal.

[@d.stepanenko]

it's absurd when it's normal. how will you react if you see something like "combat helicopter" instead of "he" there?

[@patricknelson]

@@d.stepanenko lol, ok.

[@weilieschok4468]

My gut feeling, Google is going to sunset this beast once flutter is mature enough

[@TayambaMwanza]

Is flutter really that popular? It doesn't seem to be for me?

[@thedelicatecook2]

Does flutter have built in support concepts like lazy loading modules/components ? Dependency injection ? Internationalization ? Automatic library updates with schematics ? I truly don’t know, I know angular more. My feeling right now is that the feature set of both is quite different, they don’t really solve the same problems, appart from UI building obviously. Also isn’t flutter for web just a big canvas ? In a way a big non-DOM black box, without any current support for SEO ?

[@weilieschok4468]

I am not expert in angular but worse in flutter. But guess u r right these tools are designed to solve diff solutions. But I jz more hooked to flutter due to the way the promoted the product :)

[@Matt-hs5jm]

Agreed. Flutter showed a lot of self-awareness from Google. It clearly takes a lot more inspiration from React than from Angular.

[@javierfuentesmora1814]

Dont waste your Time ,learn React

[@JoelNietoTec]

Nah man

[@patricknelson]

Check out Svelte, too.

[@javierfuentesmora1814]

Svelte is really good too , the only bad thing is the job market

[@patricknelson]

True! Then again, it's relatively young. As a hiring manager myself, general experience not only with components but just overall problem solving skills *and* the ability to pick up new tech is probably more important to me rather than simply listing "3yrs experience" next to some specific framework. Any _competent_ developer aught to be able to adjust and shift pace and pick up a new framework. That's not to say one is better than the other per se, but a better developer is one who is able to adapt what they learn more broadly and apply it to new stacks/frameworks/etc. 😊

[@StarOnCheek]

Omg just do what Google does best and discontinue it already

[@TayambaMwanza]

Angular is trending upwards from what I've seen.

[@markthompson-g]

But but but...what will I make videos about???

[@thefryingpan1021]

@benawad