Angular Dev Tools

[00:00:00]
>> Alex Okrushko: One more thing I wanted to show you here, and this is really cool. So Angular has the Angular dev tools, and we can use these dev tools. You can install it. It's part of the Chrome extensions, and you can see this Angular here, and it will look into the structure of our application. It'll show all the components that we have. Right, for example, we have the app root, the header, and then the router outlet pushes this app event list into it.

[00:00:39]
And moreover, it's highlighting them too in the, you see on the page itself, it's highlighting them. And moreover, we can see, for example, what is my this, uh, at the event card, right? What I can see is what's injected into this as well, what the inputs are, what the outputs are, what the properties are, and what's even cooler, and this is iterations, I think v21 added quite a few of these things.

[00:01:11]
I can see the directly the signal values as well. So we can see that again, our data is a read-only signal, or we can see all those signals and values. And yeah, you can even lock them, right? Outputs not much, of course, because it's a function. Yes, so that's pretty cool. So that's one thing you can see. You can show signal graphs as well. This is how the signals are connected to each other.

[00:01:41]
For example, we can see the date signal, and we see the computer to see it's in the green. It's type computed. It's using this date signal inside of it and recomputes, and then we can see that this event card is using all of them. The way Angular works, a new one is really just binding to those signals, and it can know, it can know automatically when to run the change detection based on those signal changes.

[00:02:17]
Because it's basically using the effect and wraps the template code on the effect, so any signals within effect will all trigger a change. If you're not using the signal within effect then within the template, then it doesn't need to be updated, change detected. Again, really cool, and you can see this linked signal, right, is a linked to initial like. So yeah, very powerful, really cool things.

[00:02:48]
We have profiler as well, which we're going to use, so you can see the even the injector, injector tree of the app, which again we're going to use a little bit more later, but it can show us how components are connected through the injector hierarchy. Yeah, really cool. Is there anything that needs to be done to get the Angular dev tools to work in older projects? For example, someone's saying that in one of their projects they aren't able to use the Angular dev tools that they get an error that this page is not using Angular.

[00:03:32]
Um, Angular dev tools, that's a great question. I think Angular dev tools are guaranteed to work with the latest Angular. Anything past that, it might try to try to reach out for something that wasn't exposed to it yet, so this is unfortunately, it's not really versioned, right? It's basically made work with the latest one. Yes, sorry, is it an extension or is it a package? It's an extension.

[00:04:03]
It's a Chrome extension, Chrome extension, so that's why it's kind of not packaged with the app itself, so you basically get the latest. It works with the latest, guaranteed. It might work with a few versions back, most likely. Well, there's been a lot of changes in the signal, so maybe not, but yeah. But the cool thing about Angular, it should be fairly easy to move and update the versions up.

[00:04:37]
If you are, if you're below 15 and you 15, then yeah, it could be some challenges, do version by version. It could be some challenges, but especially in the recent ones, it's like super smooth migration, unless you use a lot of other heavy dependencies. In my opinion, in Angular, you should not use a lot of other third-party dependencies. It's really just, you know, Angular itself and NgRx, but I'm biased there a little bit, but it's basically the default, de facto state management for any large or even medium Angular applications, especially in the enterprise.

[00:05:26]
And we're going to talk a little bit more about it in the advanced Angular course. So make sure to watch that too. Yes, so apart from those, again, Tailwind and things like that and friends. Do not use, I do not recommend using a lot of other third-party things. It really hinders the upgrade story. I've been working with different codebases and different frameworks. React, Next as well. I feel sometimes the pain of upgrades.

[00:05:59]
Yes. What if you need something a little extra for like grids, or you need filtering or fancier, like a material table? You know what I mean? Like, what if I have a customer that just, I can't custom build the filtering? Yes, that's a great question. So what about the other custom components? Angular has its own material library. That's one, but it also has the CDK, which is component developer kit, which is bare bones, styleless, and you can add your own styles.

[00:06:35]
It does have tables. I see where you're going. I had the same problems in my enterprise grid that I needed. Yes, of course, you can have exceptions in that case, for example. Again, not a paid promo or just personal experience, I really like AG Grid. It's really super powerful, and if anything I, from custom components I bring, that's probably one of the few. They also added the Dataviz library.

[00:07:11]
I haven't used it personally because my teams build their own Dataviz with its own DSL, its own ways to create things. That was not public, unfortunately. But yes, they also have the Dataviz which, coming from the AG Grid team, I'm pretty sure it's very good. So, but I haven't used the Dataviz. I did use the AG Grid, no questions. That's an excellent dependency. If you have an existing codebase that's using on push components or change detection strategy on push, can you just go ahead and use signals?

[00:07:42]
Do you have to make any changes to those components? Yes, great question. So on push change detection, which I'm going to go a little bit on the advanced Angular as well, but the cool thing about it is because Angular controls both the signals and change detection, there's no extra changes needed. It would know almost like async pipe that marks for check. It would know that the signal changed because the template itself is basically wrapped under the hood with the effect.

[00:08:21]
And again, the whole effect is less of a like public API which you do need when you need network responses and need updates there, but it was very needed for the Angular itself because for the template to see the changes in it, it's using that effect and that's why it's implicitly tracking as well, because you just have those signals within the template, and they would know that when those change, you need to run change detection.

[00:08:50]
Both with zone, which we currently have a zone triggering change detection, and in the advanced course we switched to zoneless, it would also know that signals changed. So on push is great, and it will work with signals, no problem.