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.4 Event Bindings

Event bindings are used to send data back out of a component, and they can be used with regular DOM events like clicks or key presses. They can also be the basis of custom events that we want our components to emit. In this lesson we look at both aspects of event binding.

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.4 Event Bindings

Hi folks, in this lesson, we're going to see how we can add event bindings for things like clicks on elements. As well as complete our understanding on output properties. In the example application at the moment, we have the start component visible and the game and end components hidden. However, the start button is currently disabled, so let's just change that so that it is enabled. And we don't need this test method, let's just get rid of that quickly. So we're probably going to want to add a click handler to the button so that we can perform an action like starting the game. The start button is in the start component. So let's add a binding for the click event of the button and the template first of all. The syntax for an event binding is to enclose the name of the event that we want to bind to within parenthesis. The method of the component that we want to invoke when the event occurs, the template statement, is specified on the right hand part of the expression after the equals sign. Now let's add the start game method to the component. So let's go back to the browser now and let's just open now the console. And lets just clear that. There's a couple of things in there I already, there's the player from when we created the models earlier on in the course. And this just is generic, development mode, log which we get from Angular. So let's just get rid of those and now let's click this start button. So the page reloaded, and the reason why it did that is because we've got a button inside a form. And the default action that the browser will take is to treat that button like a submit button. So let's just preserve the log in here, and then go back to the console, let's clear that again. And let's hit the start button one more time. So this time we did see the message briefly. It didn't seem to want to preserve that, nevermind. But we did see that briefly there. So we know that the handler is working and the event binding is working in the way that you expect. So, we're not quite there yet. In this case however, we want to stop the page reloading for one thing. So, let's go back to the template. The way that we would do that traditionally is to code the event preventdefault method. And to do that we'll need the event object. So we can pass the event object using a special token in the expression in the templates here. So this tells Angular that we want to pass through the event object. So now let's go back to the class and the method will know receive that event object. So let's have a parameter for it and we can then call the preventdefault method on it. And let's go back to the browser again. And now the page doesn't reload. Like property or attribute bindings, event bindings represent a one way flow of data. But with an event binding, data flows out of the UI and back into the component class with property and attribute bindings. The data flows in the opposite direction, but all three of these bindings represent one way flows of data. So now, let's say to everyone to hide the stock component and show the game component when the stop button is clicked. The stop button is inside the stock component. But the logic to show and hide the various components is in the home component. As well as binding to regular events like clicks and key presses and the like, we can also bind to custom events which makes it easy for child components to communicate with their parents components. So what we need is for the start components to emit a start game event when the button's clicked. So we've already got the output and event emitter tokens imported into this class. So now we need to define the events that will be emitted. We do this using the output decorator and we decorate a property of the class. So, as an example earlier in the course, we added this outgoing data property. Let's just change that to be a proxy called start. And now inside the start game method, instead of logging to the console, we can emit a start event. So back in the home components template, we can add an event binding for this custom start event. So this time, the event that we're binding too is called Start and we're going to invoke another method called startgame. But this one will be in the home components. So inside the startgame method in the home component we can set the hide start property to true and the hide game property to false. So now let's go back to the browser and we should find that when we click the Start button, we see the game component, awesome. So we can also pass data out without our custom event. And at the moment, we're saying that the event is going to emit a string, let's just change that. And now when we omit the custom event, we can pass an object and it will get omitted with the custom event. So now we need to do two things. We need to update the event binding in the home components and we want to pass through the event object. And we should now have to receive that in the ven handler in the home component. So let's check it out in the browser. And we can see that our custom event object is logged to the console. And it just contains the property that we set. It doesn't contain all of the other events though. So we don't actually need to do that, let's get rid of that for now In fact, in this case we don't need to emit any type of value, so let's get rid of that any type. So in this lesson, we saw how we combined to both regular DOM events, as well as custom events, using Angular event bindings. We saw that the syntax for event bindings is to wrap the name of the event that we want to bind to in parenthesis. Followed by the name of the method that we want to use to handle the event. We also saw that if we want to a component to meets custom events, we just need to define the name of the event using the Output decorator. And that the event should be in instance of the EventEmitter class. We can then emit the event at the appropriate times and handle this in any ancestor components. Thanks for watching.

Back to the top