This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we will review Data Binding
In Angular, data-binding is
described as the ability to
0:00
past data between the component class and
the template.
0:03
There are three types of
data-bindings in Angular.
0:06
One way where information is passes
from the component classes property to
0:09
the view, one way [SOUND] where an event
is triggered on the template and
0:14
the information about the event is passed
from the UI to the component class.
0:18
And there is two way data binding, this
is where information that's updated in
0:23
the view or the component triggers
the changes in the opposite place.
0:28
Let's take a look at some syntax for
each style of data binding.
0:32
Interperlation is expressed
by wrapping two Kelly braces
0:37
around a class property or an expression.
0:40
When the value changes in a component,
the view will be updated.
0:43
You can also use data bindings to
map a value in the component class
0:47
to an attribute of something
like an input element.
0:52
This is known as attribute binding and can
be expressed by placing square brackets
0:55
around the HTML elements
attribute name and then,
1:00
setting the right of the equal
sign to match the class property.
1:04
Another form of one way data banding
is by using events to send data
1:08
from a child component method
to a parent component.
1:13
This is expressed by wrapping
parentheses around the target property
1:17
of the child component on the left
hand side of the equals sign.
1:21
And to call a listener method on
the right hand side of the equals sign.
1:26
You can also use native
events like click and
1:30
focus to trigger listener
methods on a component.
1:32
Two way data binding Is a way not
only to retrieve a component class
1:36
property value but
also update it from the view directly.
1:41
This is expressed by wrapping
a set of square brackets and
1:45
a set of parenthesis around
the component class property.
1:48
The component class property also
needs to be configured as an input and
1:52
an output property where
the input receives new data and
1:56
the output omits any changes that occurs
outside of the user's interaction.
1:59
I've included more information
in the teacher's notes.
2:05
Back in the browser,
we can see all of our emojia displayed.
2:08
We only want one emoji to be shown.
2:12
Back in the editor, I'll change template
to use a new property called active emoji.
2:15
I'll also put a click handler on the H2.
2:24
This will call the function change emoji.
2:27
Angular handles HTML events similar to how
we used to write JavaScript in the DOM.
2:32
To use the ng-click event in Angular, you
use parenthesis and then the event name.
2:37
The main difference is that
the expression inside the quotes
2:43
is scoped to this particular component.
2:46
In this case, it's app component and
not the global JavaScript scope.
2:48
Now, I need to update the component
class with these two new pieces.
2:52
ActiveEmoji is a string, so
I'll declare the type as a string.
2:58
Because TypeScript is
a superset of JavaScript,
3:05
type definitions are inferred
when they're declared,
3:08
because I'm not setting an initial
value for the activeEmoji.
3:11
I need to declare the type as String.
3:15
If I didn't declare the type,
3:17
TypeScript will assume that any value
type can be assigned to Active Emoji.
3:19
By declaring Active Emoji
as a String type,
3:25
I can prevent any invalid assignment.
3:28
To see what would happen,
I could add an equal sign and
3:30
set the initial value to three.
3:34
TypeScript windows is a red squiggly
line signifying that our assigned value
3:36
doesn't have the same type as
what we had defined, string.
3:40
If we tried saving the file,
our build would fail.
3:44
Now let's add our changeEmoji method.
3:57
This is a simple function that
randomly sets the activeEmoji.
4:08
Let's check out the browser.
4:28
The initial value of our active
emoji property isn't defined.
4:31
This is why an emoji is invisible when
we click it a random emoji is shown.
4:36
Great.
4:42
Our users can have hours of fun cycling
through these whimsical emojis.
4:43
You need to sign up for Treehouse in order to download course files.
Sign up