Video details

AngularAir - Lazy Load Angular Components for a Performance Benefit with Fanis Prodromou



Hey, what's going on? Welcome to another episode of Angular Air. I'm your host, Justin. And on today's episode, we are going to learn about lazy loading, angular components, see if we can get a little bit of performance benefit from that. That'll be super interesting. Looking forward to it because we're familiar with lazy loading modules, but dove deeper into like smaller finite pieces. Should be pretty cool. Can't wait to learn about it. So let's say hi to our panelists, then we'll meet our guests and then we'll get into the content. Joining us today, we've got Alyssa Elyssa. What's going on? Hello. Hello. Happy to be here. Happy to have you, Bonnie's with us, Bonnie, how's it going? It's going great. Happy Friday. Happy Friday. I like our Friday scheduled stuff, it kind of it's I don't know, I feel more energy on on a Friday. It's good. I love hanging out with you guys on Fridays, and I'm very excited about our guest today. Yes, yes, and our guest joining us today is Barney's Finest. How's it going? All good. All good here. Thanks. Thanks for asking. And as Bonnie said, it's Friday, end of day here. So I would think are awesome. Everything's great. Yeah. And we got to learn some awesome stuff. Excited about that today. Yeah. You got to get some sets of slides and stuff, which we dove right into it, definitely. So I can share my screen right away. Also, a lot of people here might not know you, so you're going to tell us who are you and where are you from? So I can present myself. I have a card for this to present myself. So I'm finally prodromal. I'm from Greece, Athens and from top to bottom. Agritech director and senior instructor in Cold Hub. I'm a front and lead in the company architects and I'm offering the book Mastering the Active Forms and expect to have it published in about a month, something like this, and also have a free course in Nangiloc Nation. And the title, the title is Industry Active Forms. So feel free to join. Of course on Nation is amazing and also my course and I'm an organizer of Unclutter Top and the bottom right corner. You can see my contact details. Twitter is Purdon with my blog is a blog to the Profundis that might have some cool there or. I find them cool, at least for myself. They're cool, but you can check it out if you're going to connect with me somewhere. And something brand new from my side is a YouTube channel, and the name is called Swords with Profundis. So the idea for this one is to have a code such as, as I said it, of 10, 15 minutes, something like these without any mods details or without too much details of just how to do something. And this is how it looks like. So please feel free to subscribe so that you can be updated. It's brand new. It's almost two weeks there and I plan to have more video soon and the next one will be uploaded tomorrow and without any further delay. So let's start the today's talk is about lazy load components. And in order to present how to lazy load the component, I will guide you through how to load a component using a selector. And now you might be like, really how to load the component using a selector. We already know this. I promise you. That is not going to be that boring. So I have some cool things there. And also the next thing that the next step is how to load a component factories over. This is the way of how to dynamically load the component and last but not least, how to lazy load the component. So we will go through them stack step by step. This is how the template looks like awesome, I'm not that proud for my artistic things, but this is how it looks like a disaster, a border here and a narrow prominent arrow which says that key component and I like the Dasht outline. I listen, I have seen some websites this week, so that is beautiful. And you should not be ashamed of it. It's a visual representation of what goes here. I like it. Sorry. Thank you. And this is actually how the template looks like. It's very simple, just that the tag here with a class paragraph tag another div here with a class and inside here we're going to render our component. And imagine the following, so let's say that you have the selecter of lazy content and this is the template in line template like this is the content of that. We have Hispan with Colorada lazy load component. What will be the result if we load the selector in this area? Of course, this is going to be our result. This is how it looks like in the template. So let's have a look. So let me close this one and jump into the code. So first, allow me to introduce you to to the code. Let me zoom in a bit. I think it's better it's better now. OK, so let's start from the up component estimate and we can see that we have here as a lazy rapper selector. And if we open these, what we can see is that we have only one selector inside the dust area, which is lazy content and what it is all about. So let's close this and open the lazy content. This is a very simple component, the only thing that it has is just a selector and the template and I have also this code, I have removed this code from other branches, but not from this one to ignore this code. So imagine that we do not have them at all. So the only thing that we have to focus on is only the template. So we can see this in the browser. What we can see is that real component in the dust area. And this is how it looks like a nice. For this presentation, I have also another component, and the name is the one content, so it's exactly the same. But you on in my question here is the following. How about if I go hand in this container, in this wrapper to load more than one components and have also a condition? I can imagine that we can have like in the wrapper, we can have like an input and the input to be. So let me just write it then. What could we like type and the type we can have a union here to be like either lazy or lazy or on something like these. And based on these type, then we can have our condition. And this condition could be, again, like Enza, if if the type. Equals lazy, sorry, equals lazy. I want to present these and I can duplicate this and be like, but if I have another type and the time is as you are, I going to load the lazy one content. And of course, you have to inject this type from the up component, so let's do this so I could inject here the type and it will be like lazy. Let's go to the browser. What we can see is that we have the REDWAN, but if we load the lazy one, what we can see is that we have the green one. So exactly the same component. Exactly the same template. The only difference is that we have green and red and different names here. No more, no Dantes. So nice. But first, let's see now let's see how things work, it's very simple to have like a condition is very simple to have the component, but let's see how things work. Imagine the following. In a matter of fact, actually, every schematic in Anguilla is a class, right? So you have here a class. And we can have, again, a class for a directive, a class for a pipe. Everything is a class. What differentiates us, one with the other of this is the decorator and angular needs to to combine these components are required to compile this code and the compilation, the compiled code could be something like this that you can see on the right side. And what you can see here do have the class name here. You have the FARC, which is from the factory. And here you can see that you have Campi, which we know that this one is a component and very important that we have here. The type and the type is the class name and also have the selected name. And of course, this has many other things, but wouldn't fill Alesina in this slide. So it will have three components. For example, we are going to have three combined components over every component is going to be combined. Now, imagine that during the I'm going to combine, all the combined components are kept in a stack, something like this. So we have a stock with all the combined components. Of course, I do not imply that this is the architecture of angular, but this at least will help us follow this presentation and understand the rest of them. And if you are wondering how the lazy component or the lazy one Kendon component looks like in the development tool, this is how it looks like. We can see how the FHC, which is the factory, and also have the component with the type and the type. This is very important that the type is the class name. Now, let's visualize this and imagine that we have a very, very simple template and our template is like we have a development and also how the components and the components selected in this case is this one up, one copy. And during the compilation of code we need to have we need to have a grandma going to have analysis. And based on these, we have some tokens. So the token generator will see that from this code, I will generate two different nodes. And these are the components selector and the def. And based on these tokens, based on these nodes, then it can be like, OK, I want to pick the code for the selector. What is the selector? This one. So the code is going to pick this one. This combined component, if you remember, previously we had all the components in a combined component stock. So this is our selector and this is what we're going to get up one copy. And as soon as we have this voila, we'll have it in the browser, but here we have a problem and the problem is not on the floor, not on, not on. The infographics are represented. We have a problem of how do we load the compound with a selector? How bout if we are going to load many components, think that we need to load 10 different components? What are you going to do? Are you going to use an NGF and treat something like this? It's okay. It's a more than a K, but if we are treated with principle principles, this is a violation of open clause which says that the code should be open for extension but closed for modification. And this is actually the problem that we will try to solve. The solution to this problem is to lazy load the components and we will see this step by step. The recipe for this is that we need to have a few container of which actually is a container where we can dynamically attach views on another component. So it's just a container and we have many other components and we attach them to that container. And the second recipe is Dushka Invoker method. So simple as that does dynamically create the component. So this is the second day of this presentation, this talk of how to dynamically load the component using a factory resolver, the template is going to be exactly the same look changes that. The only change is that we need to have and then the container and more specifically, we need to have a template. The reference lab we see here has laser content. And we need this for equity later on. So firstly, let's see how things work. If you remember with this Costabile combined component stock and if you are wondering how the combined components that looks like this is the icon, that I couldn't find a better one. So imagine that this is how a components that look like and in order to dynamically create a component, you have to select you have to resolve from this stock a component. So we are resolving by type. And if you remember, the type is the class name. So when we resolve, we have to provide the class name. And as soon as we have the combined component, then we can create the component. And as soon as we do, this will have the component in the browser. Now, let's with the quote. Previously, we had a template, a reference variable, and the name was lazy content, so this is it. So we have the futile and definitely need to have this read option of containment, because this is what we do have, a container of a full container of having these. Then the steps are very easy. And actually we have two steps. The first one is a result. Resolve the component, the complete method name is resolve component factory. But to make it more simple, we can be like reserve component and we'll have to provide the class name. And if you remember, we have two different components. The first one is lazy and the other one is lazy. You are so I want to resolve the component with class named lazy column component. Nice. That is the response of these. The return type of these is going to be a component factory, having the components factory. What can we do, create the component, providing what we just get from the previous line. And if you're wondering where we're going to create the component, the answer is in the container. And what is the container? The container that we created previously, the template reference Viterbi. So allow me to go back a bit. So we said that we have resolve. So if we go back, we can see here two steps. The first one is resolve and the second one is create. And if we can see the code, we can see resolve and create two different steps. Now let's see how things work. Let's see in action, actually. So I will kill this and I have to do some changes, discard all my changes here. And be like, I want the bronze dynamically, create the components nice. So as you can see in the up component, let's gain some time to start the server in the upcoming email. I already have the lazy upper and they provide the component type. And it will go to the lazy rapper, what we can see here is that we no longer have the condition. Previously we had a condition like if the type is one, are going to load these. If the type is are something else are going to load another selector, another component selector. But if we see the code, what we can see is that we have, let's say, a responsibility. We still have the condition, but now we have the condition in the in the source code. We have it in the components. And the code is like if the components type, the the component type is lazy, are going to resolve the component, which it with a class name, lazy content component which correspond here. If the Monotype is lazy, one are going to resolve another component, the lazy one content component, and what is this? And this is the lazy half here. And in any case, I want to create a component, very simple steps, but something very important in this one. Whenever we use the component factor resolver, we need let me open the up module. We need definitely to declare our components. So we have here lazy content and lazy and content, these two. And of course, definitely we have to have the energy, the components. If we do not have this, we cannot we cannot dynamically load the components. So two things, declarations and end the components. And let's see the code. Let's say that the browser, if I click load the first, we can see that this is the lazy load component, the first one. And if I click the other button, we can see you unload component. Nice. So this is how we will know the components dynamically. But what I said is that the solution to the problem is to lazy load the components. But I lied. So this wasn't a lazy load. This was a nigger load by the comes up. And the recipe to lazy load the component is that we need to have the full container of. We need to dynamically create a component, but the secret sauce here is that we need to have imports. And the code will be the same the same language previously when we dynamically load the command. So this is the third leg, let's say, of how to lazy load a component. And again, we need to have the container with a complete reference like we see here, lazy content. And now let's see the flow. If you remember, we said about the combined components, yeah, we have the combined components, but now with way back we can create it, we can get different chunks for each lazy load component. And this is actually a benefit of the on the performance. So it will have 10 different components. This means that we are going to have 10 different chunks that are not going to be in the main tank. And having these tanks, then we're going to be like import or download the specific tank in the browser and what we are going to get is a combined component. This is also something very important. When we downloaded what we get is a combined component. As soon as we have these, the flow is the same like we used previously. When we dynamically create the component, we have to respond by type, which type? We have to define it with a class name, create the component and voila, we have it in the browser. And the flow again here is sort of the same when we load the components, the flow goes like we define the components and the components are combined in different tanks and we do not have them in the browser unless we request them. So as soon as we like I want the third component, we will have it in the browser. Now, let's see the code. The code is that we need one more line, and this line is that we have to use, import and provide the path of the component. My component lives here. OK, so this is my path. Nice. The return type of this one will be an object. I named it like a laser contact component and this object has a property and this property is the class name. If you remember who said previously that in order to resolve a component, you have to provide the class name so that the class name. So it's like lazy condom component. So we'll have it. So as soon as we resolve, we can then create the component. Let's see it in action, so I will again switch. Allow me to kill the server and also have like a lazy load components with condition. So this is what we need. And let's see the code firstly in the app component. In the morning, what we have is the lazy rapper and we provide the selected component type as soon as we have these in the lazy rapper, we have a condition. So let me start also the server. So we'll have her condition sort of the same. So what are the dynamic like the components? Previously we also had the condition and you might take now you might go wondering and what does it change? The change here is that we have to download on it different condition, on its different case. You have to learn the component and we have to provide the path. So I won't if the component type is lazy, I want to import the lazy content. And in any case, we define the path and then resolve and create. And if the component, obviously lazy one, will have to do the exact same thing, resolve and create something very important is in the module. We do not have the declarations whenever you have a component in the declarations, part means that the component will be part of the main tank. So now we do not have it. And also we do not even have the entry components here. Nice. So this is very cool. So not declarations and the components. And I'm glad that the following so it goes from top to bottom, let's say, and will see that we have here a path will be like, I know what you are trying to do here. You want to lazy load component. No worries. I will kombai. I will compile the component for you so it will try to resolve this path. Can resolve this. Yes. Can I resolve this. Yes, I can resolve the path so that as soon as I can resolve the path I will compile the component. So let's see the browser and see it in action. I will also open the development tools. Clear this and I will click the first one load, the first load the first. So as you can see here, we have a tank name. Allow me to zoom in this a bit. So we'll have a name, and that name is Blazey Condon Glazy, blah, blah, and what we have here is the combined component. And is everything that we need will have the factory, we have the component somewhere here is also the type and some were also here is that the selector, everything that we have in this component. So let's clear this and click the second line. So the second night. So we downloaded the second one and now the first. We don't have to download them because they're already cost. They already in the in the application. So this is how the lazy load the components. Can you see here a pattern like. So let's do it together, we have here lazy. And we have also here lazy, we have here lazy, and then we'll have you on and on and on and here also. So it seems to have a pattern. So we need these. The problem here is exactly the same. So we said that they will try to resolve who will try to solve this, will try to make it even better and solve the up and principle violation. But we didn't. The solution to this problem is to lay to lay the component, but this time using the pattern that I presented to you, that we have a pattern. So let's try to do it together and. I will change again. Branch will be like Liselotte components with a pattern. I will kill the server and now let's see what we have, as you can see. We no longer have that big boilerplate. Let's say we no longer have the condition, no more condition. The only thing that we have here is that we have to compute. We have to generate in the runtime. We have to generate the path. So the path is like this component type and we expect to have either lazy or lazy. You are so lazy, condemned, lazy Kendon convenant. Nice. So the idea is that we try to generate the path dynamically and our goal is like, OK, I can come combine the code. OK, I see that we have here an import which means that you are trying to have a lazy load component. I can try to, I will try to resolve the path and compile the component and try to resolve the path and phase. We cannot resolve the path because the path is generated in the runtime. So let's try to build this. Let's give you the time. Come on. I'm thinking. They found us while we wait for that, they want to know if this GitHub repo is public. Sorry, is this GitHub repo or where they can see it? Yeah, yeah, definitely it is public. All right. So what we can see here is that we have some warnings and the warning is like a warning on the lazy content and the warning here, unless you want content. So have two different warnings and please make sure it is in your config file. We have the files or include property, which means that Angra couldn't compile the components. So we have to provide our help there. And let's do this in this conflict up here in the include, what I'm going to do is actually copy this, copy the relative path. And this is it, and I'm going to do the exact same thing for the other one copy Latin path, so we'll have it. So let's give it a try once more and compile it. And now what we expect to have is to see the tanks, we expect to see zero and two on two different tanks and not having the on. So cross your fingers not to have any warnings. So nice, so no longer warnings and what we can see here is that we have indeed two different tanks here, so it will go in the browser. I will load. Clearys and click the first button. The first and what we can see is that this is the name of the tank and this is the combined component, so we provided our help to Angela 022 to the framework, actually, and we compile the components by ourselves and the fatigue. The second one, we can see the second tank. So this is actually how we lazy load the components. But you know what? We still have the exact same problem. So we said that we will try to solve the open cloud principle. And in the first place, we had this violation in the template, then we had this violation in the source code and now we'll have the same violation in the TS config. So let's solve this as well. So how can we do this? So if I have like lazy and anything here and delete this one, I expect to compile all the components, both the lazy and lazy. And actually this is a solution of how to compile your components that they follow the same the same path, the same pattern of, let's say. So let's give it a second. So what we can see is that we have two different lacy tank files and you go to the browser. I will reload, clear everything and click the first nice so seat and load the second and I guess I guess so. Live counting sometimes means that things go wrong, but I will give it the tie. So if I copy and paste this one and we are going to have the lazy to contend you have nothing to worry about. His bill is crossing his fingers for you in the chat. OK, so how the lazy to content component and I will change the selector and I will change this one. Too lazy to. And the column will be at 9:00 a.m. and yeah actually this is it. And the class name. So how lazy to content component. And without any other modification I'm going to be like I going to have one more bottom here with the exact same margin. Right. I'm going to have three and I want to load the lazy two and these will be an error. So let's give it a try. And if I click and disserve now, expect to have three different tacks, zero, one and two, and it will click the button, Watpac to download the new component you have just created. And this is this is very cool because you can imagine that you can have many different components with the same infrastructure without doing any any other changes your code. So you have load the first thing, this load the second and engineer who can say lazy to load components. Nice. So this is actually how we download a component using a pattern and lazy load actually the component. And that was it. This is how we do it. So thank you very much. You haven't answered yes yet. So I want to point out really quick that the reason you had to engy serve again, meet because you're actually changing the config file. Right? So like, you couldn't just let the live reload happen because you're actually making something that that affects how it builds completely. So you have to reserve it once you made that change to the star lazy, right? Exactly. Exactly. Yes, exactly. Very. If I had the exact same things without any change on the config, we could have it, Azeez, by the end of the Deskovic two to reload it. And actually, it had to reload it then to serve when I had to switch from dynamic to lazy load, because, again, we had a change of the config. But now that you've got your config with the wild card in there now, theoretically you should be able to drop another thing and give the time a try. So let's hear it here. So let's play with three, cross your fingers again, Bill. It's always when you go off the rails that things get crazy. I don't think he ever uncross them. It's just the three and the three that you just crossed more weight, three and a half crossed. And this is going to be like this. And what else do we need? We need the up component and will be much the same margin. And I want to provide three. And the bottom will be please work, guys. So let's see. You know what? Let's see how the tanks. I seem to have another tank here and yeah, it works nice. Very good. I really like that, and this is like I saw a penis talking, I think you did some stuff for us on inauguration and I was like, he's such a good teacher. I really like that. I, I like I liked it. The minute I saw the slide with the dotted line around it, I was like, it's such a simple visual. And then you just like it's so simple when you just focus on exactly one thing and it's really easy to follow. And that was some flawless live coding and really good about your brand new YouTube channel. Not that we want to commit to our YouTube channel, obviously. Definitely not. Come on, Bonnie, you know the drill. We're all about more content for everybody. The more the better. I'm just in I can't just, like, be like we don't even have Mike here to pick on anybody. I can't just it can't be too easy. Like, we have to harass the guests. A little bit a little bit gentler, a little bit, yeah. All right. All right. We got a couple. So I want to break down some of the things that you talked about. Right. But really quickly, we have one question in the chat about repeating the explanation of the engy serve and the reason why we had to do that, sir. Right. And that's the idea that, like, when we serve, it's livery loading, it's livery loading the build of our code. Right. But the config is like the instructions of how to do that. And so if we change the config, then that requires us to serve again, because that's the instructions that engie service going off of to then do its its stuff. Right. So that's kind of why I bring that up, because I run into that all the time, like I'll make a change and I'll be like, why did it not change in my browser. What the heck. Oh yeah. I've got to stop the server and start again because they actually changed the instructions for its behavior. Right. So that's kind of what that is. I think this kind of explanation I will copy pasted in my notes and the next time I will repeat the exact same thing. Very good explanation there in the chat because I was picking on your YouTube channel because I really think you're a fabulous teacher. That's the only reason why I pick I only pick on the people I like. You all know that. Thank you, thank you one, so I got really excited when you initially started off and started and he dove deep into the compilation of the components and what we see there. I had an opportunity to do a talk years ago on at Edgecast embracing Component Tranquility, where I dove into and I called it the component tax write that that concept that every time we create a component, it's actually going to compile that and deliver that as a bundle. Right. So we need to be mindful of that. And just talking this discussion, this whole approach that you're talking about is being mindful of that component tax that we pay and when do we want to take that on? Right. And so when we lazy load it, we're saying we're deferring that so the client doesn't have to take on that extra component bundle until they actually request it. And that's a real slick about it. I'd love a. And sometimes it is very useful. So I have used this one in a blizzard and sometimes the weeds are you have to present sort of the same content and you can be like, next, next, next, next, next, and see different components. And sometimes the requirements go crazy. And they are like, you know what, I want for more components, for more talks. And you have a solution like this. It's very easy. The only thing that you have to do is I have my content, my button. Boom, ready. And the Wizards are great example, because it's a lot of times in the Web development space, you'll have abandonment right where a customer will only go to step two and they're out. Right. Or maybe they make another decision. They're out of the wizard and into another piece of your site. And that ability to only lazy load what they need right in that wizards step or there's components is very powerful in terms of getting content and interaction to the customer instantly because the payload is a lot smaller. Exactly. Exactly. And so I didn't dove into and I had a question about what happens when those components that we lazy load need to have inputs and maybe even outputs bound to them. And what do we approach there when when we say we want to not only load it, but now we need to wire up some stuff for it? So for this one, so what we can do this is they are the initial idea of the hub, so if you extend a base on it or whatever, having a structure you can even have here, for example. I method, and this could be like something like a hook, and as soon as you invoke this hook, you can do something, whatever you can to meet, you can output something, and you can even have your inputs. And the input could be like even public properties. And as soon as you let me go to the upper. So as soon as you have the component here, the component factory, or is it from the component factory, you can get actually what is it? You can have the instance of the component. So this is I don't remember where this is not the common name, so I don't remember exactly where the coldest. And of course, during live coding, you are more panicked in order to find it and you cannot find it. But the idea is that I will have like a pseudocode. Right. So let's hide it from the component factory. I can have my component instance and as soon as I have my component instance here and if every component follows the exact same path pattern, let's say I have the input of something either being a title or subtitle or whatever, and if they have the exact same methods, you can either give or get something from that component. And is that is the line thirty one, the creek component, does that return the component instance that it created? Maybe it's off of that. So let's see. And and this is this is the instance. And so, so you can then like what you're saying is you can say, OK, I created like a typescript interface to define the API contract for any of these components. Right. So if you create another component that you want to lazy load in here, it can have this API contract of these inputs and these outputs with these names. Right. And then, you know, can you instantiate one of these? That is going to be an instance of that type. And now you have this pattern for, OK, I need to set the title of that component or the description of that component. Right. And follow that area and work just fine. So this is how this is a very cool thing. And as far as I remember, you can have her genetic type, so when you create the component, you can experience something like I want to provide the base component, the base component, so that you have of course, this should follow this pattern as well. But as soon as you have the basic genetic component, then you can have also the intelligence, which helps a lot. Yeah, then you're really crafting that whole like these the structure, the expected structure of those components that we're we allow this component to load look like this, right. So anybody who wants to create their own now follows that same contractive. It should have input, a input be or should have output this. And now you have a consistency even further with that pattern. Yeah, it's really cool. OK, so add another comment I want to talk about, I forgot, so give me a second. Let me think about that one, maybe some of our other stuff, some questions. But I don't think that is. How can I say that we might need to solve is how about if I want to have services in the lazy load components? So, for example, here I want to cover the cost of service. So if if the service singleton, we will use the exact same instance, we going to recreate it. So we know that in order to create a new instance, we need to have a provider. And either you have a provider to create a new instance or reuse an already created instance from the application. And these are works just fine. And another thing that it's this is a very simple example, and I remember with Tiger Sanders about this, how about this is more complicated, let's say how about if I go in the constructor to have. Are these Kambalda actually depend on the module? What is my module, because here is just a component, but they're going to have something like the active module, for example, here. How can I do this? And the idea to this one, I can very quickly presented. So let me go back is that we have to have something like a dummy module here. And so let's import these and that. We also have the reactive module. Of course, here. I don't need to provide this here, and this is going to be. Michael, whatever module, so this is my module. This is what I have just imported and in the declarations I have to provide the lazy content component and then I can be like, you know what? I want to have a firm control, for example, and I will have like name control. And this will be a form control and the name control. I will apply a binding in an input. So input type equals text and I want to have the firm control. And I will assign it I will find it actually with the name Control and to make sure that these awards night I will interpolated using the dollar value property. So I the fear is that when we download the component, what we are going to download the lazy content component, we will download actually the module itself, and which means that we will have the module we already have declared. And let's see if this will work without restarting the server. So this is the lazy, which is the first one. So let me fill these and load the first no errors. And if I start typing. Yeah. So this is this is how it works. It seems that our. It's a workaround, I don't think that this is a solution to this problem, but it's a workaround haven't found any any other solution to this kind of problems. But at least it seems that it works nice. And we have here the module and we also have the component itself. Nice. Yeah. Rakel. Justin, can you see that question by saying, if I'm lazy loading a component, he's asking about performance issues, but I think there wouldn't be a performance issue as long as the components. Do you see that question in the track? Yeah, the question the question is about if I have a component that has child components and I think that's kind of finace what you just went over in terms of an energy model, that would kind of be how you would do it, because when we just lazy load the component, the component decorator doesn't have any way to define like child components that it has is part of it. So you need an energy module to do that. And saying that this component also has these other components that need to bring in in order to define all these components as the declarations. And so if you're a component that you want to lazy load had other child components, it would need to have something like an engine module that helps to find those, right? Yeah, exactly. So we can say that this one would be like the hydrogen component and this will be the orchestrator. I have my module here and will have the components. So by this it will work differently. Yeah, so I think it's the granularity of what level you're going at, right, like are you loading a component? And it's its basic component that has inputs and outputs. You're here. If you need to start stepping up and saying there's other dependencies for that other component dependencies, then you start looking at like an energy module to to orchestrate that and you just kind of move up the chain from there. But you have solutions to to tackle those different things that you face. Yeah, which is great, because if you don't and I've seen a lot of clients that just load everything on the home page, as soon as you try to be the home page, you see every single thing for every single page and it's a little crazy. So it's really nice to be able to do this. So one of the things I wanted to point out in that code, if you can bring the code back up for where we lazy load the component. Right. And we call the module or I'm sorry, you just think you're right. OK, yeah. So in here. So one of the things you talked about is when we lazy load here, we have to bring in the we're getting the value and then we're accessing the class name, the class name off of it. Did we a camera. And maybe we don't have to do that at this point. Where did we have that? So when we imported it and we got that lazy load component, yeah, OK, yeah, here, so line twenty four, so lazy load component and then in the brackets we're accessing a property and that property is the component name. And when we got to that, when you're when you show that you have to now access the component arm off of there, that import statement on line twenty three is bringing in essentially the module. Right. And not engie module, but the module that's from that file. So if you're if that file exported a class of your component like it does, and it also exports a function, a name function or another class, then this lazy load, lazy content component object is going to have all of those exported pieces that import file. And so that's why we at that point, we have to say we want the class name from there that we use. If we had a function, we could access the function from there, from that lazy load as well. Right, exactly. And I think that even like you said, this is a very good one. If we have export default here, we can even get rid of this one and it will come just the default one to be the class name. And as soon as we have the class name, we can get rid of these BROCKET property taxes or something like this. But it's exactly as you say that we have in this module. As soon as we have the ECMAScript module, we can do many things with these. And I think that's a good thing for people to kind of think about when we think about like twenty three, because we see that import call now when we do our routing. Right. And I lazy load the routes and we have we want to lazy load a module for an angular route and we use the import statement, but then after we call the import statement we have to do something after it. Right. And what we're doing is we're getting a hold of the S module and then we're asking for the engie module class that's in that IA's module return from the import statement. And this is the very same thing here, is that when we call the import, we need to then ask for the piece of the module that we got back unless we do the default, right? Yeah, exactly. Exactly. And in this one, in another solitary, that very good, the thing with her Essex and it's awesome. And let's now say that we don't need to have input's, we don't have output's, and we can get it even from this boilerplate code, because sometimes it could be something like a boilerplate. So let's let's hope it will work so I can be like I want to have this as a component component and I want to have a type any, for example, in politics as well. And I can assign these. To this component, as soon as I have these, so let me go then on the cement and replace this one with. The energy component outlet, and it will provide here the component. So this is a very similar cases and it means that we can, without having any boiler plate, we can still use the laser loaded component in the template in the in the container, actually. They want to know if you can do this kind of stuff in the. Oh, maybe, yes. So let's see if I going to have, like, the lazy content component and be like. Here's my name, Control, and this will never show some breakpoints, I will go to that second and then on the first one. Yeah, you can do about it. We're going to have your breakpoints and. Some. That's very cool. I like. Yeah, and again, like you're lazy loading it, and it's a similar type of pattern that we do and we lazy load routes, right, and engy model. So the same kind of conceptual things that we think about in terms of can we debug that and that lazy loaded module. Right. We can do the same kind of thing here because we're essentially doing the same thing, but at a more granular level. Right. All the way down at the component level. That's really cool. This has been awesome. You spent a lot of stuff that in a simple form, which was great. I mean, we got we got to see the journey and learn all these parts. And then even at the very end here, you just added a little bit of bonus, right. With making that even simpler. So, so much good stuff. It's been asked in great. And we're going to hit it off. I was like just the kind of love you have to share. So this is such a case that it was I wanted to make it work and I spent some time and I was like, OK, since I spend some time, I read an article and after the article I will have a talk. So something that we know, it's it's awesome to say it. So, you know, something just said. So it's this is how I see them and I love it. It's a great philosophy, I love it. Very nice. All right, well, we're at the top of the hour, so let's see if we have any picks and then we'll kind of wrap it up. Sound good? All right. Do any of our panelists have Bonnie have a pick, right. I know you guys are going to look at me again, like last week, like I'm crazy, but I'm still picking GameStop and you all can laugh at me all you want to. But I love the game stuff. I'm all about the GameStop. And today it's having a I'm picking GameStop and also community hang out on nation right immediately after this. We're bringing bonds with a sponsor. You have time to join us. We're going to discuss further on that. GameStop Yo, you think I'm crazy. I know. I know. But just wait. Just wait. So you're picking GameStop. What does it mean to pick games up, like we should go shop there? Like what? What are you picking for games? Go Google. I just like the stock. There's some stuff going on and you should just go check it out. If there's there's a whole thing, it's like. This whole David and Goliath, it's just fun and and also, like I said last week, I used to shop there with my kids when I was little. But there's just interesting stuff going on with GameStop these days. And it's it's interesting. Check it out. You should check it out. I'm going to keep until you all go and find out what's going on. You look nice. All right. Very cool. I'm going to take the door that finace has back with the is that a door with an arcade? Yeah, it's actually the idea with this one is that I use Ubuntu. And in the comments that I have been working, we have a mouse teams and unfortunately teams that cannot have virtual backgrounds. And that was like since I cannot have a vision of a government, I will fix my own background. And this is why I did it. That's awesome. That's all real backgrounds are always better anyway, so I love it, but if you're about to lose this office, aren't you? Yes, in two months. It's going to be in two miles. Yeah, it will be like a pink baby room, actually. It's big in that area. So when we have our daughter, we only had the office room. And so it became a nursery and it did double duty as an office. So that's both pretty well worked. Great when our daughter was sleeping and then it worked as full time nursery when she was awake, which was most of the time. But yeah, but we would idea that was back in like the the days when World Warcraft became just kind of launch and stuff. So we had my wife and I had a dual desk on one side and so we'd play Wow. And then we'd switch over to the baby. And she was like, Yeah, that's amazing. Very, very amazing. Speaking of amazing, this was your first angular air visit. I think it went very well. Thank you very much. I think I think you should come back and teach us some more stuff periodically, we will be tuning into your YouTube channel and and of course, we'll see. So you have the brand. So you just released the reactive forms, the pre reactive forums course on angular, angular nation, which I'm very I can't believe it's free because it's really cool. And I was like, are you sure that you want this to be free? It was like I was like, OK, man. But you're also working on a more advanced course as well, right? Exactly. And the YouTube channel and. And the book and a book, right, Farnese prodromal, so many things that the road and I'm busy with them and I'm really sometimes I'm very excited with all of them. I'm like, yeah, let's do them. And then time hits and you're like, how do I have the time to do all this? Yeah, and you just persevere through find a way to time management desires. It's crazy sometimes. All right, well, a fine, like Bonnie said, we really, really appreciate you coming on and sharing your time. Sharing this content was amazing presentation, great teaching skills. It took us on this journey. That was that was awesome that we really appreciate you sharing your time and your knowledge. Thank you. Thanks a lot for having me. It was awesome. Thanks a lot, athlete. All right. Have a good one, everyone. We'll see you next time. Bye bye.