Angular2 Understanding of Property Binding

Property Binding

 

Property Binding we use   One Way Binding ….  From Component  to  View

Binding Angular2

 

  {   }                    =>                 <>

Component        =>                View

Suppose:

Title =  “List of Students”         =>    <h1> List of Students <h1>

If   we change in the Component Property  that change  will  reflect in the DOM View …

DOM elements  ( Like  input / h1 / src etc. ) have properties ..

There are three way of binding property of DOM element with component property …

“{{  }}” >>>  Double Curly braces   which called  Interpolation

Interpolation of Component Property

and other are as follow :

“[  ]”  >>>>>> Square bracket  HTML    <h1> </h1>  element have property  Name “textContent”

we write as  :

  <h1 textContent=  ” Title “ > </h1>  

here is  ” textContent “ propery of <h1> tag ” textContent “ value   ” Title “ coming from Component property ….

bind-    here we can use HTML element property  with prefix of  ” bind- ” as bellow :-

       <h1   bind-textContent = ” Title “> </h1>  here  ” textContent ”  with prefix with ” bind-

Binding Ways

Interpolation :-   normally  Prefer  to use rendering  dynamic values between the element like

In Heading , Div , Paragraphs , span and text values

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*