Skip to content

Angular Binding and Interactivity

Jump to bottom
Vincent Kruger edited this page Sep 22, 2022 · 1 revision

Background Info

In angular bindings and interactivity go hand in hand.
Binding simply means connecting your javascript to your html and vice versa.

For example, if you click a button or type something into an input field (we change the HTML), we want our variables/data (javascript) to also change automatically.

Similarly, if we change our variables/data (javascript), we want our HTML to show their new values.

Imagine for example we have a button that when the user clicks on it, our site/app simply counts how many times the user has clicked said button.

With regular HTML and Javascript, that might look something like the following:

   <p id="counterDisplay">You've clicked the button 0 times.</p>

    <button onclick="buttonClicked()">Click Me!</button>

    <script>
      var count = 0;
      function buttonClicked() {
        count++;
        var el = document.getElementById("counterDisplay");
        el.innerHTML = `You've clicked the button ${count} times.`;
      }
    </script>

As you can see, the HTML can't use our variable directly (the <p> tag doesn't include/use the count variable anywhere).
Similarly, the Javascript has to manually find the element of interest, using getElementById and then update it's innerHtml to a new value to display.

With Angular, this "connection" between HTML and Javascript is done automatically, and is referred to as binding.

Let's take a look at recreating the above functionality using Angular.

Creating our first binding

Let's start by editing app.component.ts and add our function and count variable.

//...
// other auto-generated code should be here already
// we just want to add a variable and a function inside our `AppComponent` class though
//...
export class AppComponent {
  // declare a count variable and start it at 0
  count: number = 0;

  // declare a function we'd like to run once the user clicks the button
  // we could name this function whatever we wanted, as long as we later use the same name in the HTML template
  onClick() {
    // increase the counter by one every time we click the button
    this.count = this.count + 1;
    // log that the button was clicked, as well as how many times it has been clicked
    console.log('Button was clicked!', this.count);
  }
}

Note the use of this inside of the function. Inside the onClick function this refers to our current instance of the AppComponent class, and allows us to access it's count variable.

Now let's "bind" our function and variable to our HTML.
Edit your app.component.html to look as follows.

<!-- Using double {{curly brackets}} allows us to reference variables defined inside our component -->
<!-- {{}} is for displaying data -->
<p>You've clicked the button {{ count }} times.</p>

<!-- Using (round brackets) allows us to call/use functions defined inside our component -->
<!-- () is for calling functions/triggering functionality -->
<button (click)="onClick()">Click Me!</button>

After adding this code, you should see your text update when you click the button.

binding

You can read more about Angular bindings here as well as some of the other types of binding (yes, there's more!).
I would highly recommend extra reading as far as possible, even if it's slightly overwhelming and you don't fully grasp it at first, repeatedly exposing yourself to new ideas is key to solidifying time over time.

So take a break if you need to and you feel like nothing is sinking in, then come back the next day or a few hours later and look at the same content again. This is the normal flow when expanding your knowledge, it might take 4,5 6 tries, but eventually things start to make more and more sense.

Clone this wiki locally