Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Manage Angular 2 Elements with Events and Refs

2:00 Angular 2 lesson by

Angular 2 provides powerful template syntax to access events and elements inside of your Component's class. This lesson shows how to access the click events off of a button and the values and element off of an input.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

This lesson shows you how set listen for click events using the (click) syntax. It also covers getting values off of an input using the #ref syntax then passing that value into the onClick event handler.

Avatar
Przemysław

If you plan to do some custom events please be aware
Event names need to be lower case!!!

And from alpha.34 you may use dash syntax.

Avatar
Nils

how does this all typescript compile in the browser work? magic ? its pretty awesome none the less

Avatar
Joel

how does this all typescript compile in the browser work? magic ? its pretty awesome none the less

It is using system.js and typescript.js to compile on the fly. It is nice, but you also lose a huge benefit from TypeScript compilation and it makes finding errors a real chore. Silent failures.

Nice way to drop in and start doing stuff though!

In reply to Nils
Avatar

I'm unable to make the refs work and can't find any supporting documentation on angular 2's site. Can you provide a link? Also, I'm not using TypeScript, but again couldn't find the "#" reference documentation.

In reply to egghead.io
Avatar
Joel

I'm unable to make the refs work and can't find any supporting documentation on angular 2's site. Can you provide a link? Also, I'm not using TypeScript, but again couldn't find the "#" reference documentation.

I wouldn't use Angular 2 without TS personally. Sounds awful 😨

That said, "refs" are referred to as "local template variables"

this article has a good section on them.

Impossible to say what is going on with your local code ¯\_(ツ)_/¯

In reply to

In my simple form I'm going to delete this entire template, replace it with a div that has an input and a button inside of it. The button will just say Click me! So when I hit save this will refresh, and we'll have an input and my button.

simple-form.component.ts

@Component({
  selector: 'app-simple-form',
  template: `<div>

<input type="text">
<button>Click me!</button>

</div>`,
  styles: []
})

To handle a click on this button, you type parenths around the event name, like (click), that you want to handle, and then you assign that to a method on your class which I'm going to call onClick.

simple-form.component.ts

<button (click)="onClick()">Click me!</button>

In my class, I'm going to come in here and say onClick and just write console.log( 'clicked!' ). I'll hit save. Once I start clicking this button, you'll see clicked! logged out in the console.

simple-form.component.ts

export class SimpleFormComponent implements ngOnInit {
  onClick(){
    console.log('clicked!');  // clicked!
  }

  constructor() { }

  ngOnInit() { 
  }
}

This syntax of wrapping these parenths around event names, works with any dom event actually. Now on this input, I'm going to type a pound sign and then myInput. This is what is called a ref, or a reference to this input.

simple-form.component.ts

<input #myInput type="text">
<button (click)="onClick()">Click me!</button>

Meaning that I can access the values off of this input, and pass them into other places. To prove this I'm going to say myInput.value, and then pass this value into the click handler.

simple-form.component.ts

<input #myInput type="text">
<button (click)="onClick(myInput.value)">Click me!</button>

I'll say value, and then log out that value. When I hit save now, the myInput is here. We're getting the value off the input which is passed in a handler, and then logged out in the console. If I type in here and click the button, you'll see that type is logged out.

simple-form.component.ts

onClick(value){
    console.log(value);  // type
                         // something else
  }

If I delete this and type something else, and click again, you'll see something else is logged out. You got to prove that this is a ref to this actual input. If you delete this .value completely, you'll see that when I save and click the button now, it gives me this actual element.

Element Logged Out

You'll see when I roll over it here, that it highlights in the dom in the page. So this combination of events and refs allow you to grab values off of elements, and handle them any way you need to.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?