Angular - 5.12-Access model and DOM with @ViewChild

In the last video, we learned about local references. Now, there is also another way to access local references or any element, in fact, directly from our TypeScript code. For now, we pass the reference here when we call a method, and it works well, but sometimes we want to access it before we call a method. And there’s a nice little decorator we can use in TypeScript to access that.

Let’s go back to Server Content. Here, I will quickly duplicate this entry and comment on the old solution using the bidirectional link and the new solution will not use the bidirectional link, but rather will also have a local reference, we will put serverContentInput. Now, in the cockpit component, I will also comment on the new serverContent here and add a new property that I will call serverContentInput. Now, serveContentInput as this is only a property, but we can add to View Child in front of this decorator with parentheses and we need to import View Child from Angular Core. Now, View Child like this won’t work. We have to pass an argument here. And that argument is actually the element selector. How we want to select the item. And the selector now, is not like a CSS selector, but for example, we can just pass as a string, the name of a local reference. Thus, the server content can now be passed as a string. If you don’t want to pass a string, but you want to select a component, you can just pass the component type here. So, in the cockpit, we don’t use other components, but in the application component, we could pass the cockpit component that way, not like a chain, to access the first occurrence of this cockpit component in the application component. But here I’m going to go back to access to the local reference, which is probably the use case you’ll see most often. And with that, we now get access to our serverContentInput. Now, what does it actually contain then?

Let’s quickly comment on this code, to avoid errors. And let’s make a console log of this serverContentInput. So our property here, which is sort of defined by View Child. So with that, if I also comment on that here, so that we can run our application. And if now I save this and we go back to our application and I type something here and I click on add server, we see that this is of type "element ref". Thus, contrary to the local reference that we passed directly from the model via the method, which was the element itself, this is of type "element ref". We can therefore define this type here. "Element ref" is a reference to this element. It is necessary to import "Element ref" from Angular Core, as this is one of its key features. Now let’s go to the addServer() function, which is called when we click the Add Server button. First, we obtain the value entered by the user in the form text box by accessing the value property of the input element. Then we create an instance of our server data model using this value. We then call the serverAdd method, which is defined in our server service, passing the created server instance as a parameter. This method adds the server to our list of servers stored in the server service. Finally, we reset the form by calling the form element’s reset() method.

In summary, this code defines a form component to add servers to a list of servers stored in an Angular service. We saw how to use View Child to access the HTML element of the form, how to recover the value entered by the user, how to create an instance of our server data model, how to call a method in our server service to add the server to the list, and finally how to reset the form.