In this Angular tutorial, we'll go over the concept of data binding. You'll also learn how to tie data in an Angular web application to show on the UI using curly brackets.

Use Interpolation in Angular 13 Data Binding

Since AngularJS 1.0, data binding has been a feature of the framework. Curly braces are used in the code to represent data binding - {{variable goes here}} ? and this process is known as interpolation.

A variable named {{ title }} exists in the app.component.html file. The value of this variable is set in the app.component.ts file. We'll show the value in app.component.html later.

Our goal is to have the automobiles appear in a dropdown menu in the browser. We'll use the code segment listed below to accomplish this.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Title variable declared
  title = 'My Angular App';
  
  // Defined cars array  
  cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];
  
}

To begin, we'll make a standard select tag with an option. We've chosen to use the *ngFor loop as a tool. Using this *ngFor loop, we will iterate through the array of automobiles. As a result, an option tag will be produced with the values from the drop-down.

In Angular, we'll use the following syntax ? *ngFor = "let i for automobiles." The tag {{ i }} is used to retrieve the value of automobiles.

For data binding, we need two curly brackets, as previously explained. You declare the variables in the app.component.ts file. Curly brackets are used to retrieve the values afterwards.

<div style="text-align:center">
  <img width="250" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div> Cars :
    <select>
      <option *ngFor="let i of cars">{{i}}</option>
    </select>
  </div>
</div>

Now we'll open the browser and see the output of the above array of automobiles.

The variable is stored in app.component.ts, and the value of the variable is retrieved using curly brackets in app.component.html - for example {{ }}.

When utilising Angular Data Binding, how do you use an If Statement?
It's past time for us to display info in the browser based on the condition. We've just created a variable and given it the value 'true.' We'll use the if statement to show/hide the data that will be displayed.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // isPresent var is declared
  isPresent:boolean = true;
  // Title variable declared
  title = 'My Angular App';
  // Defined cars array  
  cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];
}

<div style="text-align:center">
  <img width="250" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div> Cars :
    <select>
      <option *ngFor="let i of cars">{{i}}</option>
    </select>
  </div>
  <!-- Text will be displayed on the basis of the isPresent variable. -->
  <div style="padding-top: 30px" *ngIf="isPresent">
    <span>Statement is true.</span>
    <p>Show me because isPresent is set to true.</p>
  </div>
</div>

If then Else using Angular 13 Data Binding

The variable isPresent will have the value 'false' assigned to it.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // isPresent var is declared
  isPresent:boolean = false;
  // Title variable declared
  title = 'My Angular App';
  // Defined cars array  
  cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];
}

We'll use ng-template to display the else condition, as shown below.

<div style="text-align:center">
  <img width="250" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div> Cars :
    <select>
      <option *ngFor="let i of cars">{{i}}</option>
    </select>
  </div>
  <div style="padding-top: 30px">
    <span *ngIf="isPresent; else condition1">Statement is true.</span>
    <ng-template #condition1>NgTemplate condition is working!</ng-template>
  </div>
</div>

Another If then Else Example

In the app.component.ts file, we will set the isPresent variable to true. The condition has been written as follows:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // isPresent var is declared
  isPresent:boolean = true;
}

If the variable is true, condition 1 is true; otherwise, condition 2 is true. We have two templates with the ids #condition1 and #condition2 at this stage.

<div style="text-align:center">
  <img width="250" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <div style="padding-top: 30px">
    <span *ngIf="isPresent; then condition1 else condition2">Statement is valid.</span>
    <ng-template #condition1>Statement is valid</ng-template>
    <ng-template #condition2>Statement is invalid</ng-template>
  </div>
</div>

I hope you will like the content and it will help you to learn Angular 13 Data Binding Example Tutorial
If you like this content, do share.