The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Manage Angular 2 Elements with Events and Refs

Manage Angular 2 Elements with Events and Refs

2:00
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?