Binding (one-way/two-way data binding)

Binding (Part-1)

(one-way data binding,two-way data binding ,pipes, NgFor )

One-way binding

In one-way data binding, the template expression {{}} and square braces [] are used to bind a property  
to the DOM .

Different types of one-way data binding.

• Interpolation Binding
• Property Binding
• Attribute Binding
• Class Binding
• Style Binding

Interpolation Binding

With interpolation, we place the component property name in the View template, enclosed in double curly braces: {{property Name}}. 

Ex:

Open your Angular-five project .

copy and paste below code phase in home.component.ts;

 @Component({

      selector: 'app-home',

      templateUrl: './home.component.html',

      styleUrls: ['./home.component.css']

    })

    export class HomeComponent implements OnInit {

    firstname="nimal";

    lastname="perera"

      constructor() { }

      ngOnInit() {

      }

    }

copy and paste below code phase in  home.component.html

     firstname: {{firstname}}

     lastname: {{lastname}}

     fullname: {{firstname}} {{lastname}}

Property Binding

It is used to bind values of component/model properties to the HTML element. Depending on the values, it will change the existing behavior of the HTML element.

We bind  property as [property]='expression';

write phase in home.component.ts 

    public myid="input_1";

add html template to home.component.html in below,

Now run your project and Open inspect element. (right click on browser à scroll and click inspects à go through elements)

input_1 assigned to myid easily.If you want to change the name of the id u can do it changing home.component.ts myid.

Ex:  myid=”name”;

       myid=”age” .

Like that we can use property bind for add property our projects.

Ex:

01. Think you want to disable  input field .To that action using property binding.

   [disabled]="isDisabled" , used in input html field.

we can give true and false to isDisabled to disable or enable input field in our browser. 

 public isDisabled="true/false".

02. Use hidden DOM property.

 [hidden]="true/false".

IMPORTANT

Attributes and Properties are different.

Attributes --> HTML

Properties --> Document Object Model in angular

Property values however can change.

Attribute Binding

This is same  as Property Binding.Different is we have to add  "attr." with prefix attribute name
[attr.prefix attribute name]

Lets take a example.
Now we use colspan attribute of element for understand  how work attribute binding.
We can do attribute binding in three ways.

01.Using bracket [].
td [attr.colspan]="clspn"    //mostly used this way to bind attributes.

02. Using bind- keyword        
td bind-attr.colspan="clspn"

03. Using interpolation          //What is interpolation  go title InterPolation
td attr.colspan={{clspn}}

Lets open your home.component.ts and home.component.html
do as below

more details
https://angular.io/guide/template-syntax