Angular Data Binding using double curly brackets {{}}

Interpolation
property
Event

Data Binding is one of the amazing feature of angular. Using data binding, we can bind data from component class to Template by using {{}} or double curly brackets.

Embedding expression in {{}} is also known as interpolation. By simply storing a variable in class component, and binding in template results in a dynamic webpage. We can also fetch data from user through form controls and bind.

Angular supports both one way and two-way Data Binding. We can change input in form control and angular will bind on keystroke using events. It is really helpful for user interface like, show and hide elements, form validation, changes while typing, etc.

Bindings in Angular

String interpolation
Property binding
Event binding
Two Way data binding

String interpolation

String Interpolation is used using double curly brackets {{}}, same angular js. We can add dynamic data from component class or any js expression. We can use operators like, +, -, * or %.

We can also sort array or get object property in template directly.

Binding expressions

to use class name in selector, use .class-name, for example, if class name is app-root, use .app-root. We can also use descriptive class names, like container.

        <!-- app.component.html -->
            
<p>{{2+3}}</p>
<p>{{2**3}}</p>

Store variable in component class

        <!-- app.component.ts -->

export class AppComponent {
  title = 'ngApp';
}

        <!-- app.component.html -->
    
<h1>{{title}}</h1>

Array Expression

[1,3,4]

        <!-- app.component.html -->   
    <p>{{arr.length}}</p>
    <p>{{arr.sort()}}</p>

        <!-- app.component.ts -->

export class AppComponent {
  title = 'ngApp';
  arr=[3,1,4];
}

Object Expression

Swift has 90bhp power.

        <!-- app.component.html --> 

<p>{{car.name}} has {{car.power}}bhp power.</p>

        <!-- app.component.ts -->

export class AppComponent {
  title = 'ngApp';
  car={name:"Swift",power:90}
}

Function Expression

hsanivA

        <!-- app.component.html --> 

<p>{{reverseString('Avinash')}}</p>

        <!-- app.component.ts -->

export class AppComponent {
  title = 'ngApp';
  reverseString=function(x:string){
    return x.split('').reverse().join('');
  };
}

Angular does't support bitwise operators, i.e & or |.

Property Binding

Square brackets, i.e [] are used for property binding in angular template. Property binding can be used to add attribute in html tags, like image src, disabled attribute etc.

image src binding

        <!-- app.component.html --> 
    
<img [src]="logo" alt="">

        <!-- app.component.ts -->
    
export class AppComponent {
  title = 'ngApp';
  logo="assets/logo.png";
}

button disabled binding

        <!-- app.component.html --> 
    
  <button [disabled]="dis">Disabled</button>

        <!-- app.component.ts -->
    
export class AppComponent {
  title = 'ngApp';
  dis=true;
}

class binding

To add class, angular use ngClass Directive.

Paragraph with class lead

        <!-- app.component.html --> 
    
<p [ngClass]="para">Paragraph with class lead</p>

        <!-- app.component.ts -->
    
export class AppComponent {
  title = 'ngApp';
  para="lead";
}

ngStyle

Paragraph

        <!-- app.component.html --> 
    
<p [ngStyle]="{'color':'#00f'}">Paragraph</p>
<p [ngStyle]="css">Paragraph</p>

        <!-- app.component.ts -->
    
export class AppComponent {
  title = 'ngApp';
  css={color:'#00f', background:'#ccc'};
}

Event Binding

For event binding, angular use parenthesis. Events includes click, input, change or any other JavaScript Event. The event name is written in parenthesis with value.

Click Event binding

        <!-- app.component.html --> 
      
  <button (click)="sayHi()">Say Hi</button>
  <output">{{name}}</output>

        <!-- app.component.ts -->
      
export class AppComponent {
  title = 'ngApp';
  name="";
  sayHi(){
    this.name="Hello user";
  }
}