7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.1 Handling User Input With Template Reference Variables

In this lesson I'll show you how to create template reference variables that will let you refer to a specific element from other places in the template.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


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.

Back to the top