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

4.9 Inputs

In this lesson we'll see how to pass data into a component from its parent component using an Input decorator.

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


4.9 Inputs

Hi, folks. Earlier in the course, we looked briefly at inputs when we looked at decorators. In this lesson, we're going to look at inputs from a template perspective instead of from the component's class. Before we get started, however, there's just one slight issue that we need to fix. You might notice if you stop and restart the development server at this point, that the project no longer compiles. And it gives a message about not being able to find a module called Timers. Let's just open up the start component. So a couple of videos ago,we were looking at an example that used set timeout. And when we added that set timeout, somehow this line here got added. I think it was the IDE that added that, but that is the cause of the problem and we can get rid of that. We are no longer using set timeout anyway, and we don't need to import this in order to use set timeout in the first place. So that should fix the issue. And we should be back to where we were. So back to the input decorator. The input decorator is used to specify that data will be passed into a component. At the moment, the gameComponent creates the player itself, which couples the player to the component quite strongly. Instead, we can pass the player into the component. So let's open up the gameComponent. And we'll need to bring in the input decorator. And we can then specify player as an input property instead of a regular property. So now down in the ng on init, we won't need to initialize the player anymore, so let's also get rid of that. And now we can pass the player into the component. We can do that from the homeComponent, as that is where the custom element for the gameComponent is hosted. The syntax looks just like an attribute or property binding with the square brackets, but this time we specified the name of the input property we are binding to within the square brackets. The template expression on the right points to the property of the host component that we want to pass in, which in this case is the second item in a property called players. So let's make some changes to the homeComponent class. We can add players as an array at the top of the class. And now we need to make a few changes down in the ngOnInit life cycle method. So we can get rid of these local players variable, and we can update the references here to say this.players. Let's also move the creation of the second player down into the start game method, because we won't know what the players name is going to be until after they've entered it into the imput in the start component, We'll keep the hard coded name for now. We'll worry about getting the actual players name at some point alter in the course. And let's go back to the game component again, and let's get rid of where we create the deck and shuffle it and do the dealing here. Because that is already happening in the home component. What we can do though is just make sure that the player is being parsed in correctly and we can add a console log for that. So let's now start the game And we can see that the player is being logged. So that means that the player is being passed into the game component, rather than the game component creating it itself. So the game component is now much simpler. We're passing the player objects that the game component needs into the component, rather than having the component deal with creating this object by itself. And let's just recap the input syntax. We've already seen the input decorator, and this gets applied to a property of the class. And that property then becomes a public property. So the property that we're binding to in the component that receives the object being passed in happens on the left hand side within the square brackets. And on the right hand side, that is the property that we are parsing in from the hostComponent. So the first item in the player's array is being passed from the homeComponent to the gameComponent via this input binding. So in this lesson we saw how we can use an input property to pass data into a component. We saw that we use a familiar syntax to bind to the input property of a component from the template in which the component is hosted. And that the data we want to pass in is specified as the template expression on the right hand side of the assignment. Thanks for watching

Back to the top