ForwardRef Function in Angular (Advanced, 2021)

hi there i'm glad to see you my name is mitromzyansky and in this video we're going to talk about forward ref function in angular since i released the video about breach pattern which is by the way very useful one and this video you can check out later following this link i have been getting questions like shouldn't we use the forward draft function in this particular case and i decided to make this video and explain why we can drop this forward traff function in this particular case and in which use cases we have to use forward ref this video is going to be quite advanced and if you just started with angular uh it might be that it will be quite hard to understand things what i will be explaining however if you are planning to improve your skills as an angular developer i can recommend you the great course for beginners which i personally used many years ago and the link will be in the video description and we are getting started so let's have a look at the example i prepared for you basically this is the example from the video about the bridge pattern i just copied this into the separate project in order to not mix up things and basically this is one model which has three components velocity widget weather widget and widget wrapper and velocity and weather widget it's like very basic components let me hide it it has some logic it implements the widget interface and also we provide the widget token and we assign existing class to this token right and the next weather widget is the same pretty much yeah it just has different name some different uh logic for refreshing but it also has this provider which provides the widget and to this widget will be assigned the instance of this component then inside the wrapper wrapper just uses the content child and fetches the widget which will be either weather or velocity and just i don't know trigger some methods from this concrete widgets like refresh load and and so on and how it looks like it inside the app component we use this component is proper and some concrete widget and this is how it looks in the browser yeah so if it's not super clear uh again check the video about uh bridge pattern so you will get some basic understanding yeah so this those are two widgets and the question uh from my subscribers was basically for regarding this part so shouldn't we use the forward ref function so let's figure it out i will reward this everything for now and uh let's have a look at the definition of the forwarder function and what documentation says about this so it allows us to refer to the references which are not yet defined and inside the usage nodes we can see the example that we have the class door it has the property lock and it tries to uh inject the lock class but the lock class is defined after the uh when we're trying to inject this so at this point of time it is undefined and if we have a look at our example we could see pretty much the similar thing so we try to access to velocity component before we actually declare it right here so it looks like this is a great example or great candidate for for our trap use case however if we open the terminal and try to build it i build it with the ng build mongol false environment variable in order to disable the uglifying of our bundle so it it is easier than to read the code so let's wait a little bit okay build is ready so let's copy this velocity widget component and try to find it inside our main bundle okay let's just press command key and f in order to make it prettify this everything okay here we go and now i want to find our velocity widget component and there is a interesting thing so we can see that velocity widget component is defined right here however however this part with providers you remember this provide widget use existing is declared after so at this point of time we already declared the velocity widget component yeah we see it right here and that's why it works because uh despite we see it like if it was defined before um before class declaration in fact these things right here inside annotations are processed after so after compilation we get the situation when this class defined before all right that's clear i hope why it's working however in which case we would need to use forward draft and if we have a look at the provider right now we see that this provider is not reusable but most probably we would like to extract this to some constant right i will create constant let's say widget provider which is any and i'm going to assign this object to this constant and of course i have to provide it right here and immediately we see that it complains and says that class velocity widget component used before its declarations the one way could be it's to move it behind the class and it would work because now we have the reference to this class when it's already defined however here we already get complain another complaint that blocks called variables widget provider used before its declaration so uh if to put it simple here it will be undefined at this point of time so we cannot i use it also here so i'm going to revert and this is exactly the use case for a forward trap function and if we will use it like this we get read from oops i forgot we could read from the error message and if we check our application one more time we see it works fine yeah i can refresh here there everything fine and now let's try one more time build uh our application and until it's being built this is the great time to subscribe to my channel in order to not miss my other videos all right it is done and now let's see how looks our compiled code when we declare the provider outside so i will go to the dist folder and open the main file again so let's prefight all right here we go and let's find our velocity widget and you can see now there is our use existing and forward graph which uh points to this uh what is variable yeah variable function whatever but if we would use um not a forward trap but we defined the velocity widget uh like this we would see that velocity widget would appear before the class declarations all right so if we try to find this yeah it would be the first entrance yeah here we go so this is it would fail if we are not using the uh for our trap in this case so i can close it another use case might be is if you have multiple components or directives inside one file it sounds like anti-pattern i know but in some cases this is the way to avoid the circular dependencies and we will see the real life use case from angular material uh just in few minutes but i'll let let me say few words about circular dependency how you can create the circular dependency we can create it from this widget provider easily we can create another file i will name it provider or widget provider here we go i will place here on the widget and we have to of course export it and i have to inject the velocity widget i have to inject forward ref and i have to inject the widget ah token which is yeah basically injection token and then i have to remove this here uh i have to import this from widget provider and if we save it and check their output from our compiler we see that provider is not a model okay it was not just saved uh yeah now we see warning that we have the circle dependency detected which means that a velocity widget component imports the provider which imports velocity component again yeah so uh here we import the provider inside the widget component and here we also import widget components so we get this circular dependency this is the first way how you can uh create it then you may another way how you can create it it's as example here from velocity component you can um inject you can try to inject the parent which is um wrapper yeah so i unchecked widget proper components so for my velocity uh component where is this velocity they will be injected this widget wrapper that's what i want to have maybe i have to somehow adjust the state of the child component depends on the parent right that's uh can easily can be such a use case and we will see it uh in following example and uh in in order to complete our circular dependency inside the widget proper we have to create uh dependency exactly to the velocity component as well so let's say we want to also use content child and uh this time we don't rely on widget injection token but we want to directly get access to um how it's called uh velocity widget so velocity widget component i will say that it velocity velocity is not okay so if we save it and rebuild we will see again the circular dependency because our parent depends on the child and the child depend on the parent and because they are in the different files we get this circular dependency and putting components under one file components which are depending on each other might be a solution yeah there are different ways to resolve this circular dependency but this is one of it but this is definitely not the best example and let's have a look at the real life example from angular material and in particular this tab nav bar component and in fact i will maybe zoom out a little bit to see more code or i can collapse it you can see that this file has uh two components under the one file yeah we have mod tab navigation and we have mod tab link and these two components depend on each other if we expand this part we will see that we have content child with forward ref by the way to math tab link and if we expand a math tab link we will see that inside a constructor we inject mod tab navigation so if we split them to different files we will get the circular dependency and this is the way how to avoid it again one of the ways however i wanted to show you that exactly here they're using the forward trap exactly because they define it uh they define their parent class before the child however they need to refer to this child and that's why they're using the forward trap and yeah you can do it for also safety reason to not depend on the order of your classes inside the file this is not i would say uh good when you uh have such a fragile code because you can do just refactoring just replace the order of classes and then you get unpredictable error and you are really really surprised how it could happen i just like i didn't change the things i just replaced the order so uh this forward trap you can use for kind of safety reasons so the quick conclusion we can make from it is that forward ref just captures some reference to some certain class and it resolves it when it is safe to resolve when this certain class has been declared and then uh angular uses uh resolve forward ref in order to resolve it and yeah and this is pretty much everything what it does all right guys that's it i hope now you have better understanding how forward trap function works and uh thank you very much for attention and if you would like to express your gratitude please share this video with your friends colleagues leave your feedback comments hit thumbs up if you like this or dislike if you didn't like for whatever reason i appreciate this because any activity under my videos allowed this channel to grow and i wish you product a week ahead and see you in the future

Channel: Decoded Frontend

Views: 5,072

Keywords: forwardref angular, angular tips and tricks, angular circular dependency, angular dependency injection, angular tip of the day, angular advanced tips, angular advanced techniques, angular advanced features, angular pro tips, angular tutorial, web development 2021, Angular 11

Id: uKLvqohfp6I

Length: 18min 39sec (1119 seconds)

Published: Tue Mar 30 2021