Scribd
Upload
47 views10 pages

Interpolation and Property Binding Example

Interpolation and property binding are used to bind component data to HTML elements. Interpolation mixes component variables with element content using {{ }}, while property binding binds variables to element properties using [ ]. Interpolation supports string concatenation but not HTML, while property binding supports HTML strings and boolean types. Property binding is more complex than interpolation but provides more functionality. Sanitization is used by Angular to avoid loading untrusted content like videos. The DomSanitizer can bypass sanitization for resources deemed safe by developers.

Uploaded by

ravikiran lanka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
47 views10 pages

Interpolation and Property Binding Example

Interpolation and property binding are used to bind component data to HTML elements. Interpolation mixes component variables with element content using {{ }}, while property binding binds variables to element properties using [ ]. Interpolation supports string concatenation but not HTML, while property binding supports HTML strings and boolean types. Property binding is more complex than interpolation but provides more functionality. Sanitization is used by Angular to avoid loading untrusted content like videos. The DomSanitizer can bypass sanitization for resources deemed safe by developers.

Uploaded by

ravikiran lanka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

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:
->goto oneway.component.ts
...
invalid:boolean=true;

->goto browser
...
register --> disabled [property binding]

register --> disabled [interpolation]

->goto oneway.component.ts
...
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

You might also like