Difference between String Interpolation and Property Binding

String Interpolation

• used for concatenating String
• can do small math calculation like {{ 1+1 }} inside string interpolation
• So expression inside {{ brackets }} are evaluated

Property binding

• For Setting properties using [] brackets

String interpolation and Property Binding

String Interpolation is a special syntax which is converted to property binding by Angular. It’s a convenient alternative to property binding.

When you need to concatenate strings, you must use interpolation instead of property binding.

@Component({  
        selector: 'my-app',  
        template: `<div>  
                        <h1>{{interposlationExample}}</h1>  
                    </div>`  
    })  
    export class AppComponent {  
        interposlationExample: string = 'Interpolation for string only';  
      
    }  

Property Binding is used when you have to set an element property to a non-string data value.

Example:

In the following example, we disable a button by binding to the Boolean property isDisabled.

  import { Component } from '@angular/core';  
    @Component({  
        selector: 'my-app',  
        template: `<div>  
        <button [disabled]='isDisabled'>Disable me</button>  
                         </div>`  
    })  
    export class AppComponent {  
    isDisabled: boolean = true;  
    }

If you use interpolation instead of property binding, the button will always be disabled regardless isDisabled class property value is true or false.

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `<div>  
    <button disabled='{{isDisabled}}'>Disable Me</button>  
                     </div>`  
})  
export class AppComponent {  
isDisabled: boolean = true/false;  
}

Reference :

• Stackoverflow
• CodeMentor