hi all today we will be seeing the new signal based view queries which has been introduced in angular 17 so previously I had created a video where I have explained in detail the various view queries which are available in angular so it is basically in the angular 12 version in case you have not viewed that please view the video today we will be taking a look at how we can convert that project into angular 17 with the signal based view queries the original Ango project which we created it had an app component and within that we had multiple components directives and services so here we have an app child component which is consumed within the app component and we also have an app directive and also a child service which is basically injected within the child component So within the app component we used different ways in which we will be able to query the instance of each of these like the child component the child directive the service and some special cases like the template reference and child token Etc so today we will be seeing how how we can find an equivalent for this in the new signal based approach so in the older version we made use of decorators that is at the rate view child and at the rate view children which is The Decorator which we use in case we have multiple elements matching the criteria so first let's take a look at this particular query which makes use of the view child decorator and it queres a child component so here in the angular 17 application it becomes much simpler and you can see that there is a new function called view child which accepts a parameter and there we can pass the child component so here it basically returns a signal which is of type child component or undefined now let's try displaying that within the NG on in it as well as the NG after view in it so one thing to note in the older version of angula is that when we make use of a decorator that is a Vil decorator we had certain options which can be passed to that decorator so one of them is the static option which basically means that the view child result of this query it is usually available in the NG after viw unit life cycle of the the component but in case you need to access that earlier within the NG on in it we had an option called Static when enabled it will query the value within the NG on in it itself now let's see how the behavior happens within the signal based approach so here I have added two consoles within the after viiew unit as well as the on init so now you can see that both the consoles are logging the value so it basically means that the value of the query is available in the initial step itself that is the NG on so there is no current option called Static which can be passed to the ild so here if you can see there is only one option that is the read option that is available within the signal based approach similarly in case you need to query a directory from The View so in this case the app child directive you can again make use of the same function that is view child and pass the directive so it basically returns a signal with the type child directive or undefined and here again I have added a console so here you can see that the the child directive instance is CED similarly in the case of injectables which are injected within the child component so in this scenario we have a child service as well as a child token that is defined within the component we can make use of the view child and we can pass the child service which will return a signal of type child service and the token which we have defined here we can pass that child token and we will be getting the instance of that so here again I have added the console and once we get the instance of the service I am calling a method within the service so it basically logs this message when we come here you can see the child service instance here and the log message is displayed and here we have the token so here you would have viewed that the type of that particular signal is given as unknown so in case you are aware about the type of that particular token you can pass the type here as a generic and here you will be able to see that the type is represented as what the type we passed to that view child in the old versions of angular we used to make use of this NG template a lot especially in case we had to make use of the NG if and else block but with the Advent of the control flow which is introduced in angular we might not need to regularly use it so in this example I have given an NG template anyway just to show that we are still able to query the NG template using the viewquery so here I have defined an unused template and here I we can pass the template rough to this view child and it will carate the single of that NG template from The View and here I am displaying it again within the after view unit so here you can see that the template reference is displayed here one common way of cing the required element from the view is by making use of a template reference variable like this so we can provide this variable name anywhere within the view and we will be able to quy that particular element from the compon so we can Corry that using the name of the variable like this in case of this it is LM so I have given that here and when the result is return returned the result can vary based on the element on which that variable was applied so in this scenario since we applied it on a component The Returned value will be a component instance as you can see here the child component instance is returned but in case we wanted to access the element reference of this particular element that is the app child we have the option to pass that within the view child so it is similar to the previous decorator version we can pass the element R once we save this you will be able to see that we are getting the reference to the native element similarly another option is the vi container ref so here again we have the view container reference there can be scenarios in which we apply the same template reference variable to multiple elements so in this case I have an if block so I am applying the same variable to both the if block as well as the else block so the thing about this is that based on the use in line value only one label will be displayed at a time so when we in case the use in line is true we will get the reference to this element and if the value is false we will get the else block reference so for demonstrating that I have added a set time out which toggles the value of the use in line so initially it will be false and else will be displayed and after 5 Seconds the if will be displayed so initially when we query The View we will be receiving the initial value but we need need to have a way in which we will be able to get the updated value when the reference changes so in the older versions of angular we needed to write something like this instead of declaring it as a property we need to create it as a Setter and within the setter we will be able to assign the new value which we receive as the viewquery but with the new signal based approach what we can do is we can write an effect and within that we can just access the new value so let us see this in action Let me refresh the application so initially you can see that the else block is displayed now after 5 Seconds immediately the value changed here and you can see that the effect got executed and now it's referencing to the new element now we can have a scenario in which we have multiple instance of the same element or same component within the view so in this scenario I have an app child component which is being looped multiple times within the view in case we make use of the view child we will receive a single instance of this element but in case we need to query multiple instances of the same element we have the option called view children which is available within the old angular as well so here we have The Decorator at the rate view children and you can pass the child component so that it will retrieve multiple instances used to return in a query list and within the query list we'll be having the different instances which we will be able to Loop through using the map operator but with the new signal based approach we have the view children function where we can pass the similar child component class and here also again we have the read option similar to viewchild now what we can do is we will log this within the after view unit and let's see what is the value so when we initialize you can see that we have a list of child component instances now again we need to consider the scenario in which we we can add Dynamic values or dynamic ques in case of multiple instances that is view children so here in this example we have this for Loop which basically Loops over the app child depending on number of entries within the names array so here initially we have three entries within the names array and in this sample what I'm going to do after 5 seconds I'm adding a new entry so when this happen we need to get the updated result of the viewquery so here again we can make use of the view children and within the FX in case we access the new value we will be getting the updated entry so here let's see this in action I'm going to refresh it now initially we have three entries and after 5 Seconds when the fourth entry is added automatically the effect is executed Ed and we get the updated result of the viewquery the new signal based query option also has a requir mode where you can mark that particular viewquery as a required element so suppose we do not get a matching result using that query from The View then it will throw an error so in this scenario I have marked both the element as well as the missing as required now the element is present within our view but the missing is not available so let's see what happens I am trying to access the missing element within the NG on it so when we go to our application you can see that the element which was marked as required and is missing it is throwing an error so in case I removed that required it will just return undefined and there won't be any error ER so hope you are able to get a good understanding about the new signal based approach for VES in angular see you soon thank you