Angular 4.0 : What is Angular Interpolation?


Angular  INTERPOLATION


What is Angular Interpolation?

It is all about data binding. 
It is broadly divided into three parts : 
 1. One Way Data-Binding: From Component to View Template
 2. One Way Data-Binding: From View Template to Component
 3. Two way Data-Binding: From Component to view template & From View template to component

In the Angular for data binding we used: {{ }}
{{ }} --- It is called Interpolation

When we put some value from class property to the interpolation then it is called template expression.
{{ pageHeader }} --- > Template Expression

Example:

classs AppComponent has pageHeader property which binds to the template expression


Output 

    
> We can also add hard code in the template expression

Example



Output



> We can also add ternary operator in the template expression

Example



Output


> We can also add function value in the template expression

Example



Output



Comments

Post a Comment

Popular posts from this blog

What is COALESCE Function in SQL Server?

Image
COALESCE   FUNCTION Definition              Return the first NON NULL value in a list. Syntax              COALESCE(expr1, expr2,…,expr n) Example                 SELECT COALESCE (NULL,NULL, 'GOSWAMI' ) AS NAME              SELECT COALESCE ( 'RAM' ,NULL,NULL) AS NAME              SELECT COALESCE (NULL, 'MANOHAR' ,NULL) AS NAME              SELECT COALESCE ( 'HARISH' , 'KUMAR' , 'RAWAT' ) AS NAME Output Note: it returns always first non-null value.
Read more

Angular 4.0 : What is Angular Property Binding?

Image
Angular Property Binding What is Angular Property Binding? It is one way data binding like interpolation. It is used to bind values to the DOM properties of the HTML elements.  One Way Data-Binding   From Component     →       View Template  In the Angular for property binding we used square brackets: [] Let us take an example of Property binding and interpolation:-  In this an example, I have taken html image tag and set its properties like src, height and width.  Syntax of  Property Binding:- <b>Property Binding Example</b><br /><br /> <img [src]='PropertyBindingImagePath' [height]=ImgHeight [width]=ImgWidth /> Syntax of  Interpolation:- <b>Interpolation Example</b><br /><br /> <img src='{{interpolationImagePath}}' height={{ImgHeight}} width={{ImgWidth}} /> Output Both are showing the same result only difference is syntax writing. If b
Read more