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