In Angular, data-binding is described as the ability to

past data between the component class and the template.

There are three types of data-bindings in Angular.

One way where information is passes from the component classes property to

the view, one way [SOUND] where an event is triggered on the template and

the information about the event is passed from the UI to the component class.

And there is two way data binding, this is where information that's updated in

the view or the component triggers the changes in the opposite place.

Let's take a look at some syntax for each style of data binding.

Interperlation is expressed by wrapping two Kelly braces

around a class property or an expression.

When the value changes in a component, the view will be updated.

You can also use data bindings to map a value in the component class

to an attribute of something like an input element.

This is known as attribute binding and can be expressed by placing square brackets

around the HTML elements attribute name and then,

setting the right of the equal sign to match the class property.

Another form of one way data banding is by using events to send data

from a child component method to a parent component.

This is expressed by wrapping parentheses around the target property

of the child component on the left hand side of the equals sign.

And to call a listener method on the right hand side of the equals sign.

You can also use native events like click and

focus to trigger listener methods on a component.

Two way data binding Is a way not only to retrieve a component class

property value but also update it from the view directly.

This is expressed by wrapping a set of square brackets and

a set of parenthesis around the component class property.

The component class property also needs to be configured as an input and

an output property where the input receives new data and

the output omits any changes that occurs outside of the user's interaction.

I've included more information in the teacher's notes.

Back in the browser, we can see all of our emojia displayed.

We only want one emoji to be shown.

Back in the editor, I'll change template to use a new property called active emoji.

I'll also put a click handler on the H2.

This will call the function change emoji.

Angular handles HTML events similar to how we used to write JavaScript in the DOM.

To use the ng-click event in Angular, you use parenthesis and then the event name.

The main difference is that the expression inside the quotes

is scoped to this particular component.

In this case, it's app component and not the global JavaScript scope.

Now, I need to update the component class with these two new pieces.

ActiveEmoji is a string, so I'll declare the type as a string.

Because TypeScript is a superset of JavaScript,

type definitions are inferred when they're declared,

because I'm not setting an initial value for the activeEmoji.

I need to declare the type as String.

If I didn't declare the type,

TypeScript will assume that any value type can be assigned to Active Emoji.

By declaring Active Emoji as a String type,

I can prevent any invalid assignment.

To see what would happen, I could add an equal sign and

set the initial value to three.

TypeScript windows is a red squiggly line signifying that our assigned value

doesn't have the same type as what we had defined, string.

If we tried saving the file, our build would fail.

Now let's add our changeEmoji method.

This is a simple function that randomly sets the activeEmoji.

Let's check out the browser.

The initial value of our active emoji property isn't defined.

This is why an emoji is invisible when we click it a random emoji is shown.

Great.

Our users can have hours of fun cycling through these whimsical emojis.