Interpolation and Property Binding Example

interpolation:
-----------------
*mixing component variable with html element content using an expression is called
"interpolation"
*syntax:
<tagname>
string content {{varname}}
</tagname>
*interpolation requires double curly braces {{}}
property binding:
-----------------------
*binding component variable to html element property is called
"property binding"
*syntax:
<tagname [propertyname]="varname"></tagname>
*property binding requires square brackets []
eg:
----
*goto vs code and open app1 project folder
*rc on src folder and select new folder
*provide folder name as images
*drag and drop dell.jpg from d:\dir1 into images folder
*Angular by default will not allow image file from images folder[other than assets
folder],this requires a
setting in angular.json
|
....
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"assets": [
"src/favicon.ico",
"src/assets","src/images"
]
...
*create a component
[goto terminal]
>ng g c oneway --flat
it will create a component with 2 files[ts and html]
*goto oneway.component.ts
...
selector:'app-oneway'
templateUrl:'./oneway.component.html'
...
export class OnewayComponent ..
{
prodid:string='p001';
prodname:string='dell';
prodprice:number=50000;
prodpic:string='dell.jpg';
invalid:boolean=true;
*goto oneway.component.html
<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="../images/{{prodpic}}" height="200" width="200"> <br>
<button [disabled]="invalid">Register</button> <br>
<button disabled="{{invalid}}">Register</button>
</div>
*goto app.module.ts
...
bootstrap:[OnewayComponent]
...
*goto index.html
...
<body>
<app-oneway></app-oneway>
</body>
*goto terminal
>ng s -o
note:
-------
*angular will execute interpolation|property binding to substitute variable value
with html
content
prodid: {{prodid}} | <span [innerHtml]="prodid"></span>

| |
-------------------------------
angular will exec
|
p001 <span>p001</span>
|
browser interpretation
|
prodid:p001 | p001
interpolation vs property binding:

--------------------------------------------
1.interpolation allows concatenating a variable with string
property binding doesn't allow concatenating a variable with string
prodpic="dell.jpg";
<img src="../assets/{{prodpic}}">
| |
string + variable --> concatenation-->allowed
<img [src]="../assets/prodpic">
| |
string variable --> concatenation -->not allowed
2.interpolation doesn't allow html string
property binding allows html string
note:
string with html tags is called html string
eg:
->goto oneway.component.ts
....
export class OnewayComponent implements OnInit
{
msg:string="<h3>invalid name or password</h3>";//html string
...
->goto oneway.component.html
{{msg}} <br>
<span [innerHtml]="msg"></span>
<div ..>
...
</div>
->run app
>ng s -o
<h3>invalid name or password</h3> [output with interpolation,where h3 tag
will be considered as a string]
invalid name or password [output with property
binding,where h3 tag will be considered as markup and
applied to
string content]
3.interpolation doesn't support boolean type

property binding supports boolean type
eg:
...
invalid:boolean=true;
->goto browser
...
register --> disabled [property binding]
register --> disabled [interpolation]
...
invalid:boolean=false;
->goto browser
...
register --> enabled [property binding]
register --> disabled [interpolation] -->not working properly with

boolean type
4.interpolation is developer friendly compare to property binding
username="rlp"
<h2> Hi {{username}} </h2> --> easy

<h2> Hi <span [innerHtml]="username"></span> </h2> --> complex
sanitization in angular:
------------------------------
*Angular by default will implement sanitization to avoid unnecessary content
loading
[video,..] into an angular app
*Developer can skip the sanitization to trusted resources using DomSanitizer class
eg:
----
*goto app1 project
*drag and drop movie1.mp4 from windows explorer into assets folder
*goto oneway.component.ts
....
import{DomSanitizer} from '@angular/platform-browser';
...
export class OnewayComponent implements OnInit
{
unsafeurl:string="../assets/movie1.mp4";
safeurl:any;
msg:string="<h3>invalid name or password</h3>";//html string
...
constructor(private _domsanitizer:DomSanitizer) {
this.safeurl=this._domsanitizer.bypassSecurityTrustResourceUrl(this.unsafeurl);
}
*goto oneway.component.html
<iframe [src]="safeurl" height="300" width="300"></iframe>
<br>
{{msg}} <br>
...
*goto browser
...
note:
------
_domsanitizer.bypassSecurityTrustResourceUrl method will attach some instructions
to
url to inform angular,resource is trusted by developer,so it is safe to load

Interpolation and Property Binding Example

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Interpolation and Property Binding Example

Uploaded by

Copyright:

Available Formats

interpolation:

>ng g c oneway --flat

it will create a component with 2 files[ts and html]

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

interpolation vs property binding:

3.interpolation doesn't support boolean type

register --> disabled [interpolation]

register --> disabled [interpolation] -->not working properly with

4.interpolation is developer friendly compare to property binding

<h2> Hi {{username}} </h2> --> easy

You might also like