Angular viewChild Signal Query: Complete Guide

[Music] hello everyone welcome to this video here we are going to learn about the new view chard API that was currently released now this view chard API banks on the angular signal feature to be able to get element references from the D but before we learn about the view CH API let's first look at this traditional method of grabbing Elementary references from the Dom here we are using The View chart DEC corrector and we passing the template variable name which is the chart and it will grab the HTML instance from of this and then assign it to this child class field then this works because in the NG after view in it we will see the log of the element and also we can change the styling of the element by doing this or the content here we changing the text content to view updated now let's convert this view decoror to use the new view API now to do that first we remove this at view corrector we remove this then we now assign this to the view child API and then passing the selector child now this child becomes a signal with an element instance of this H1 so you can see now we having an error here because native element does exist on type so this is now a signal and we can see that the view chart API is from the angular core modu so it returns a signal and to assess the element grabbed off from this we have to call it as as a function like this well first let's call it as a function inside this and there we see the result so you see we have the same result as we did when we use the traditional at view Decor but this view new API now replaced the corrector but this returns a signal so this becomes a data function and to retrieve the instance of the H1 inside it we have to call it like a function and we can see we have thetive element now let's go to change the test content like like we did before with the view Char corrector okay this we have an error here object of type unknown so so to type this we will come here and put element 12 so what we do is we assign this to a child L then use the if condition to make a check before the The Styling so we call it child L this do child then we make a check in the child L then want see child L do Native element do style do color red so it's red but let just also let's change the view so so you see it works now with the view child now we can also use the read property here remember in the last video we saw how we can use read to tell the ADV corrector what provider token to resolve from the result so to do that we have to pass another parameter and then we pass the read property and then the value so we are resolving an element through so we having an error here so let me clear this so we now reading of an element R from this H1 so this child will become an an element R which is what we are doing then let's read off a view container from it so you see once we make it a view container then the value of this signal will become a container and that's why we have now an error here because native element does not exist on a view container so we have to remove this sorry so you see now the instance of of this of the value of the signal here is now a view container so you see whatever we can do with with the at view CH DEC corrector we can do the same with this new view CH API now let me recap this view API returns a signal now the signal Returns the value of the query element that is read off from the Dom so what this does is to query in the Dom a selector that had this template variable child and then create a signal and assign the value of the signal to the element instance and it in this case we are passing a read property here so it will grab a view container ref off from this and assign it to the value of this signal which will get by calling the signal as a function because you remember in our past videos on angular signals to get the value of a signal we have to call it as a function because the signal is a g function now in the view CH de corrector in our past video remember we have this static property that controls when the the queries are resolved like for example if the static method is true that means the query are resolved on the initialization of the component but if it false the queries are resolved on each change detection run so that means when the static is true we can get the value of the of the queries in our NG on init it will not be undefined and also the NG after view in it but if the static property is false we cannot get the results in the NG on init we only get it in the NG after init but this is not the case when using this view API it resolves the queries when the component is initialized and also on each change detection run in the component so in this case we can get the value of the query results of this CH both in the NG after viw init and also in the NG on init so you see we can get it there and can also do whatever we want with the query so it will not throw undefined and when this component is rendered the Ved API will also update the value of the signal value reference so now let's look at multiple instances if we have if we have multiple instances here for example let me copy this create another child here let me have this one now let me have these two now let me remove this console log in on let's use only the NG after view in it so as to avoid confusion so you see we have multiple instances here of H1 with the same template variable names child here and child here so as we have in the at view child DEC corrector The View child here also we grab only the first occurrence of the select to it and assign it to the value of the signal in this class field so here we have this view chard A1 grabed and stored in the value of this view chart so this will log the element ref of this so to prove it let's do the same as we did before child grab it then check for it and then console log sorry child L log the text content no sorry native I think we have native element we have native elements here unknown sorry come here add element ref so so you see we have the log let me remove this log also so that it doesn't so you see we have the view chard one so we can see that this view chart only grabbed the first occurrence of the template variable child and stored it in the value of this signal child so can see it here so in the case of multiple instances it will do the same as the vure decoror does it just grab the first occurrence of the template variable and then store it in the value of the signal now let's look at how we can use component instances with the view chart API here we have the test component component now let's grab this and and then instead of the view chat let's render the test [Music] component then we'll pass the template variable now we can grab the instance of this component using this view chard API so all what we are going to do is to pass the template variable name as a selector to this then tell it this is a test component then here we assign it test and then we will now log it first let me comment out this and then change this to to test so what the view chart does is that it will grab the occurrence of this test variable from the Dom and then assign it to the value of this signal test now the value will be the instance of test comp component so it's what we have here now let's try it and see so you can see it's an instance of the test compo component with the counter and everything and the methods all there so you can see we can also use the template variable and also use the view CH to grab of component instances now if we have multiple components like this it to Simply grab the first one and that's it to Simply grab the first one and discard the rest it will not grab the rest so it just grab only the first one and return it so we will have the same thing it to grab the first one and return it now also let's look at how we can grab component off from the Dom without using the template variable name so as we can do with the adure decoror so we can do with this V API instead of passing the test we can pass the test component here so what this does is it will query for the occurrences of this test comp component instance in the D and then grab the element that corresponds to it so you see it still works and then we can call the methods in this test components and they will work as usual okay now let's add two buttons here to decrement and increment our counter let's add button here increment now let's add decrement this is for test and you see they will work now add our click method let's say incre and how and also here add the click and we say so we will come to our component and add the methods incre oh sorry not injector what happened incre then decree then here we call the signal test grab the instance and then call the increment so also we do here this does test a function call then call the decrement so you see this test is a signal that contains a value and the value is the instance of the test comp component which is this so when we click on this increment and on the decrement uh we will grab the value in the test signal which is an instance of the test component and call the methods inside it so it will call This And so you see that this our counter will work when we click on this increment and click on the decrement which works so you see the view CH API is very powerful and also does everything that the child decorator does and it also makes our code cleaner because we will not be seeing the symbol which can be very confusing for beginners in the angular framework yes so this is a very neat way of querying element references from the D in Anga now there might be a scenario in which the selector we are trying to query in the D via the view child may not match any element in the D and it will result to the value of the signal being undefined now this view child has a property which is required that we can use to make sure that the queries we are using in the view CH will always match with an element in the D now let's take for example let's assign a template variable name test to this compo then we remove this and instead of writing test we wrote only test now you see that there is no element with a template variable test in the Dom so this will result to the signal value of this test to being undefined now let's see it you see the value is undefined now this required this required property makes sure that whatever we are trying to query using the selector will always match to an element in the Dom if not there will be an error in our console so to make sure that the query we being quering to the using this view will always match to a value we have to use the required so to do that you add dot required so this view exports a required method or a function and then inside the now pass the selector so if we save this we will see an error in our Dom telling us there is no element in the D with a template variable name of test okay sorry we have to type it telling you that tto component so you see in our drum it throws an error NG 95 child query result is required but no value is available so you see there is no element in the Dom that has a template variable name of test so this tells us that we should be very careful so seeing this we have to verify the selector that we inputed here so we have now okay this is test that we are missing a t here so just come here and add our T and there will be no error in our Dom and also even with the error we cannot even run our component yeah because it will continous through error for us because the the value of the signal is undefined so with the right template variable name it will work it also works with other selectors like passing the directive reference component reference or other provider token like for example let's say we have another component let's say let's just create another component just for test purposes and then call it let's export it then call it test one test one then come here and write test one m test one stand alone so we'll copy it come here add it to the import array then instead of using test come here write test one so what we are doing is that we are trying to query a test one component instance from the Dom but there is no test one component or any select of test one in in the template here in our view component so we having an error okay yes because this won't work thison work there's no increment and decrement in the test one so because there is no test one component at all in our template this required will throw an error instead of making the value of the signal undefined let's go so so you see it THS an error child qu result is required but no value is available so you see this is because we have no test one component in our template but if we render the test one component in our template like this then the error will be gone because we can find an instance of it so this is how the view child API works so to recap on what we did in this video The View chard similar to the at view decoror queries for element references in the D and assigns it to a class field so but with the view child we don't have a need of using the view the corrector we just simply call The View chart like this and we can grab element references off from the Dom so we can grab element references via the template variable names or from the component on the directive or the provider token instances now the view API resolves the query results right from when the component is initialized and also when change detection run is made on the component so it merged the static property true and false into one and using it as the default value then also we can use the read property in the view API which makes it possible to read off any instance from the quer results we can read off a compon directive template ref element or view container whatever we want and also it introduce the new required method which makes sure that the references we are trying to grab of the template should exist on the D so this is the end of this video I hope you understood whatever we did here and also love this video thank you for sticking with us to the end of this video in the next we going to look at the view children API which is similar to the at view children de corrector so we going to look at it to know how it works and also see the resemblance it has with the traditional ad children corrector thanks so much please like and share this video and also don't forget to subscribe and also click on the notification button to get notified on new videos I release thank you so much and see you on the next video bye

Channel: Understanding Dev

Views: 218

Keywords:

Id: AAwpJncPZ34

Length: 22min 25sec (1345 seconds)

Published: Mon Mar 11 2024