Property Binding in Angular -Part 2

Property binding:

-----------------
Binding component variable to html element property is called "property binding"

Syntax:
   <tagname [propertyname]="varname">

Property binding requires square brackets []

Refer Previous Concept Example

https://dotnetbyudayrajakonda.blogspot.com/2023/10/data-binding-example-in-angular.html

bodyComponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent {
  FirstName: string = 'Rajakonda Uday';
  LastName: string | null = 'Kumar';
  GetFullName() : string{
    return this.FirstName + ' ' + this.LastName;
  }
  Title='Welcome to My Site'
}

.html

<div>
    <span [innerHtml]='Title'> 
    <h1> {{ GetFullName() }} </h1>   
</div>

 

Difference between angular interpolation and property binding

Add one image in assert folder. Note , angular doesn't allows image files from 

images folder by default, it requires a

 setting in angular.json

Creating a new component

 ng g c demo

Add the below code in the demo.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="aiwa.jpg";
  invalid:boolean=true;
}

.html Changes

<div style="font-size: x-large;margin: 20px;">
    prodid:{{prodid}} | <span [innerHtml]="prodid"></span> <br>
     name :{{prodname}} <br>
     price:{{prodprice}} <br>
       pic: <br>
       <img src="assets/{{samplepic}}" height="200" width="200">
       <br>
       <button [disabled]="invalid">register button with prop binding</button>
       <button disabled="{{invalid}}">register button with interpolation</button>
    </div>

Make changes to index.html














appModule.ts



Output







Again making small changes to the .ts 


import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="assets/aiwa.jpg";
  invalid:boolean=true;
}

.html Changes

<div style="font-size: x-large;margin: 20px;">
    prodid:{{prodid}} | <span [innerHtml]="prodid"></span> <br>
     name :{{prodname}} <br>
     price:{{prodprice}} <br>
       pic: <br>
      With Interpolation:
       <img src="{{samplepic}}" height="200" width="200">  <br/><br/>
       With Property Binding
       <img [src]='samplepic' height="200" width="200">
       <br>
       <button [disabled]="invalid">register button with prop binding</button>
       <button disabled="{{invalid}}">register button with interpolation</button>
    </div>

Output

Note:
-----
Angular will execute interpolation and property binding stat to substitute variable
 value with html,after this browser will perform interpretation to show the output

    prodid:{{prodid}} |  <span [innerHtml]="prodid"></span>
               |                   |      
               |                   |
                -------------------
                  angular exec
                        | 
    prodid:  p001                p001
              |                    |
               --------------------
                        |
                 browser exec
                        |
          prodid:p001 |  p001  

Property Binding and Angular Interpolation D/w
Differences between interpolation and property binding:
 1.interpolation allows concatenating | mixing a variable with text
   property binding doesn't allow concatenating | mixing a variable with text

   eg:
    <img src="../images/{{prodpic}}"  ..>
                 |          |
                text      variable
                      |
                 mixing|concatenating   ========> accepted


     <img [src]="../images/prodpic"  ..>
                     |        |
                   text     variable
                         |
                    mixing|concatenating   ========> not accepted



2

Interpolation doesn't allow html string
Property binding allows html string


Modify the .ts file as below

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="assets/aiwa.jpg";
  invalid:boolean=true;
  msg:string="<h2>registered..</h2>";
}


.html changes













Output


















3  

interpolation doesn't allow assigning boolean type data
property binding allows assigning boolean type data

   eg:
     invalid:boolean=true

     output[browser]:
          register button with prop binding [disabled]
          register button with interpolation[disabled] 

       change invalid variable value:
       invalid:boolean=false

     output[browser]:
          register button with prop binding [enabled]
          register button with interpolation[disabled]

Note: when set as false here the property binding button is enabled.

4 

interpolation is developer friendly compare to property binding
    eg:
      prodid="p001"

     <div ..>
     prodid:{{prodid}} | <span [innerHtml]="prodid"></span>

     name="raju" age=20

     <h2>
   {{name}} your age is {{age}} -->developer friendly
          (or)
 <span [innerHtml]="name"></span> your age is <span [innerHtml]="age"></span> ->complex