Angular Tutorial- Learn To Bind Data In An Angular Web App

In this Angular 14 tutorial, we will learn about the data binding concept. We will also see how to bind data in an Angular 14 web application using curly brackets to show on the front.

Use Interpretation In Angular 12 Data Binding

Data Binding has been a part of Angular Js since Angular. In the code, we go for curly brackets to denote data binding – {{variable goes here}} and this process is known as interpretation.

The app.component.html file has a variable named {{title}}. We initialize the value of this variable in the app.component.ts file. Later, we display the value in the app.component.html.

Our aim is to display the cars in a dropdown in the browser. To achieve the same, we are going to the code segment given below:

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'];
  
}

We begin by creating a normal select tag with an option. We have taken the help of the *ngForloop in option. We are going to iterate through the array of the cars using this *ngForloop. As a result, an option tag with the values in the drop-down will be created.

We will be using the given syntax in the Angular – *ngFor + “let i for cars”. In order to fetch the value of cars, we are using the tag {{i}}.

As stated earlier, we will take the help of two curly brackets for data binding. We have to go to the app.component.ts file to declare the variables. Later, we fetch the values with the help of the curly brackets:

<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 will be taking a look at the output of the above array of cars in the browser:

The app.component.ts holds the variable and the app.component.html fetches the value of this variable with the help of curly brackets – for instance, {{}.

How To Use If Statement Using Angular Data Binding?

Now, here, we will show the data in the browser on the basis of the condition. We have just added a variable and assigned ‘true’ as a value to it. With the help of if statement, we will show/hide the data to 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>

Example

If Then Else using Angular 12 Data Binding

See the below-given example

We will assign the value ‘false’ to the variable isPresent.

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'];
}

In order to display the else condition, we are going to create ng-template 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

We are going to assign true value to isPresent variable in the app.component.ts file. We have written the condition as shown below:

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 has true value then conditions, else condition2. At this point, we have come up with the ids #condition1 and #condition2:

<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>

In the browser will be shown as the below-given image:

Conclusion

So, in this Angular Js tutorial, we have learned how to bind data in an Angular Web app using the curly brackets.

Thanks