5.1 Handling User Input With Template Reference Variables

Hi folks, in this lesson, we're going to look at how we can work with data that users enter into forms. There are a number of different ways that we can capture user inputs. But in this lesson, I want to focus on how we can achieve it using template reference variables, which are special identifies that we can add to elements in a template. Let's take a look. Let's open up the start component. In the template for the start component, there is an input element for the user to enter their name into. It's up here. At the moment, it's just a regular input, all it has is a name attribute. Let's add a template reference variable to this input. We used the hash sign and then the name that we want to use for the template variable. So in this case, the name of the template variable is player name. We can now use this variable anywhere else in the template, including in other bindings on the same element. In order to send the data entered into the input by the user to the component class, we can use an event binding for the change event. And then use the template reference variable that we just added to pass in the value. In the right hand side of the expression, when we specify the name of the method that we want to invoke, we can use the template variable to pass through the value of the inputs. We could use the event object to pass this through instead, but using the template variable and just passing the data that we're interested in, and not the entire event object structure, makes our code simpler and less coupled. So let's now add the method in the start component class to receive this data. So for now, let's just log the name to the console. And let's go back to the browser now, And let's enter some data here. And we can see that it gets logged to the console. So using a template variable is a really quick way to get data from the user into our component. In really simple forms, like the one in the example up here, this might be all that's required. At the moment, the start component has a method called start game, which emits the start event from the component. Let's wire up the player name as a property of the component, and then pass this and a couple of other properties out with the start event. So let's add the property to the top of the class first of all. In the set player name method that we just added, we can then set the value that gets passed in to this new property. And as this method isn't gonna return anything, let's just give it a return type of void. And we can do that with some of the other methods in this class, Because none of them actually return a value. And there's no reason why we can't do that with the ngOnInit method either. In fact, it's very unusual for one of the lifecycle methods to actually return a value, so very often these will be marked as void. And now back in the start game method where we emit the event. We want to emit an object with that event that passes some of these properties through. The home component already binds to the start event, we can see that in the template for the home component. So we just need to pass through the event object. And back in the start game method, we'll need to receive this event object So now what we want to do is get the player name from this event. So let's move where we create the new player, and we'll have to move the deck initialization as well. So instead of hard coding the name, we can get that from the event object. And I can see some red underlining here, it looks like there's a lint error. So it's saying that player name does not exist on the type object, and that's because we've given the event object a generic type of object. So there's a couple of things that we could do here. We could get rid of this type information, And then that makes the error go away. Or if we'd like to keep that type information, instead, We can use square bracket notation. Personally, I think it's better to not provide type information in this case. It's not a regular object that we're dealing with, it's an object, but it's an event object. And we don't have a specific type for that, we could make our own interface and specify the player name is a property of this type of events object, but in this case, we don't need to go that far. So let's just put a back to how it was and take off the type information. Okay, so let's go back to the browser. And when we start again, we can see in the console log here that the name that we entered into the form has been given to the player, awesome. So in this lesson we saw how we can make use of template reference variables to pass user input back to our model. We learned that this technique is preferable to passing event objects around in order to help keep the view and the logic neatly separated. Thanks for watching.