Module 3.2: Angular Data Binding

Now let’s talk about one of the most powerful features of Angular - data binding. As we discussed earlier, Angular makes it super easy to pass information from JavaScript into HTML. This is also true in reverse - it’s very easy to get information out of HTML and into JavaScript! This is one of the most commonly used and powerful features of Angular.

You won't be changing your code in this section, just learning more about how Angular handles data.

Data Binding Actions

There are 4 distinct actions, let’s take them one at a time.

1. Take a variable from JavaScript, pass it to the HTML file, and display the value on screen This is what we did earlier. If we have a variable in the TypeScript file, and we want to display its value in the HTML file we can just use double curly braces.

2. Take a variable from JavaScript, pass it to the HTML file, and use that value as a property of an existing HTML tag. As an example, let’s pretend we have an image tag. We want the image displayed to change depending on some JavaScript logic. In the HTML file, we know that the “src” attribute controls the source of the image. Since we want Angular to be able to change this attribute, we wrap the “src” attribute in square brackets. The text inside the quote marks should be a variable

   <img [src]="myImg"/>

   As long as we had myImg defined in the TypeScript file, Angular will use the value of that variable as the source in the image tag. This is also updated in real time - if the value of myImage changed then the HTML image tag would immediately update to the new src value.

3. When an event happens in the HTML file, trigger some JavaScript Again, let’s refer back to what we did earlier, we made a JavaScript function run when the user clicks the Login or Logout buttons. When we wrap an action in parentheses, when that action fires it will run that JavaScript. It doesn’t have to be a function call - for example, we could write JavaScript logic directly inside the HTML file like so:

<button type="button" (click)='nameToDisplay = "John Smith"'>Login</button>

Now, instead of calling a function when the button is clicked, it will set the value of “nameToDisplay” to a hard-coded value. Usually you’ll want to call a function.

Other than buttons and the “click” event, another common common use for this is when the enter key is pressed inside an input tag.

<input type="text" (keyup.enter)="aFunction()">

This is similar to React's 'onKeyUp'. When an input tag receives the “keyup.enter” event, it will run “aFunction()”.

1. Instantly update between HTML and JavaScript, both ways

   We’ve saved the best for last. Angular let’s us keep the HTML and JavaScript in sync at all times through “[(ngModel)]”. This is used with <input> tags, take this one for example:

<input type="text" [(ngModel)]="variableHere">

We use this with the matching variable declared in TypeScript, like so in an example class:

export class SampleComponent implements OnIt(){
 variableHere = '';

The value of the “variableHere” variable is always in sync with the input field. This is updated in real time, as someone types. The same is true in reverse - if the value of “variableHere” were to change via JavaScript, the text displayed in the <input> tag would be immediately updated.

To read more about 2 way data binding in Angular, check out this from the official docs.

Next, we'll use our new data binding knowledge to make forms for our user.

Forms