Sanitization in Angular:

Angular will implement sanitization by default to avoid unnecessary content loading into an angular app for security reason

   Example:
     Video content,pdf content,..
 Angular is providing DOMSanitizer class to skip the sanitization for
  trusted resources[like video,pdf,..]

 Please refer Previous Example

https://dotnetbyudayrajakonda.blogspot.com/2023/10/property-binding-in-angular.html

demo-Component.ts

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="assets/aiwa.jpg";
  invalid:boolean=false;
  msg:string="<h2>registered..</h2>";
  unsafeurl:string="../assets/sample.mp4";
  safeurl:any;
  constructor(private _domsanitizer:DomSanitizer) {
    this.safeurl=this._domsanitizer.bypassSecurityTrustResourceUrl(this.unsafeurl);
  }
}

.html

 Note:
 -----
 Domsanitizer class bypassSecurityTrustResourceUrl method will inform angular,the resource is trusted by developer, so load the resource into an angular app

 If you provide unsafeurl variable to iframe src property ,it will not play
  a video,goto inspect console,it will show security error message.

Output

Property Binding in Angular -Part 2

Property binding:

-----------------
Binding component variable to html element property is called "property binding"

Syntax:
   <tagname [propertyname]="varname">

Property binding requires square brackets []

Refer Previous Concept Example

https://dotnetbyudayrajakonda.blogspot.com/2023/10/data-binding-example-in-angular.html

bodyComponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent {
  FirstName: string = 'Rajakonda Uday';
  LastName: string | null = 'Kumar';
  GetFullName() : string{
    return this.FirstName + ' ' + this.LastName;
  }
  Title='Welcome to My Site'
}

.html

<div>
    <span [innerHtml]='Title'> 
    <h1> {{ GetFullName() }} </h1>   
</div>

 

Difference between angular interpolation and property binding

Add one image in assert folder. Note , angular doesn't allows image files from 

images folder by default, it requires a

 setting in angular.json

Creating a new component

 ng g c demo

Add the below code in the demo.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="aiwa.jpg";
  invalid:boolean=true;
}

.html Changes

<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="assets/{{samplepic}}" height="200" width="200">
       <br>
       <button [disabled]="invalid">register button with prop binding</button>
       <button disabled="{{invalid}}">register button with interpolation</button>
    </div>

Make changes to index.html














appModule.ts



Output







Again making small changes to the .ts 


import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="assets/aiwa.jpg";
  invalid:boolean=true;
}

.html Changes

<div style="font-size: x-large;margin: 20px;">
    prodid:{{prodid}} | <span [innerHtml]="prodid"></span> <br>
     name :{{prodname}} <br>
     price:{{prodprice}} <br>
       pic: <br>
      With Interpolation:
       <img src="{{samplepic}}" height="200" width="200">  <br/><br/>
       With Property Binding
       <img [src]='samplepic' height="200" width="200">
       <br>
       <button [disabled]="invalid">register button with prop binding</button>
       <button disabled="{{invalid}}">register button with interpolation</button>
    </div>

Output

Note:
-----
Angular will execute interpolation and property binding stat to substitute variable
 value with html,after this browser will perform interpretation to show the output

    prodid:{{prodid}} |  <span [innerHtml]="prodid"></span>
               |                   |      
               |                   |
                -------------------
                  angular exec
                        | 
    prodid:  p001                p001
              |                    |
               --------------------
                        |
                 browser exec
                        |
          prodid:p001 |  p001  

Property Binding and Angular Interpolation D/w
Differences between interpolation and property binding:
 1.interpolation allows concatenating | mixing a variable with text
   property binding doesn't allow concatenating | mixing a variable with text

   eg:
    <img src="../images/{{prodpic}}"  ..>
                 |          |
                text      variable
                      |
                 mixing|concatenating   ========> accepted


     <img [src]="../images/prodpic"  ..>
                     |        |
                   text     variable
                         |
                    mixing|concatenating   ========> not accepted



2

Interpolation doesn't allow html string
Property binding allows html string


Modify the .ts file as below

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  prodid:string="p001";
  prodname:string="aiwa";
  prodprice:number=50000;
  samplepic:string="assets/aiwa.jpg";
  invalid:boolean=true;
  msg:string="<h2>registered..</h2>";
}


.html changes













Output


















3  

interpolation doesn't allow assigning boolean type data
property binding allows assigning boolean type data

   eg:
     invalid:boolean=true

     output[browser]:
          register button with prop binding [disabled]
          register button with interpolation[disabled] 

       change invalid variable value:
       invalid:boolean=false

     output[browser]:
          register button with prop binding [enabled]
          register button with interpolation[disabled]

Note: when set as false here the property binding button is enabled.

4 

interpolation is developer friendly compare to property binding
    eg:
      prodid="p001"

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

     name="raju" age=20

     <h2>
   {{name}} your age is {{age}} -->developer friendly
          (or)
 <span [innerHtml]="name"></span> your age is <span [innerHtml]="age"></span> ->complex

Data Binding Example in Angular -Part 1

Establishing a relation between a component [variable | method] and template
 [html element] is called "databinding".

The main advantage of databinding is reducing coding burden and separating
 UI from logic part.

Angular supports 2 types of databinding
 1.one way databinding
 2.two way databinding

one way databinding:
--------------------
Data flow from component to template (or) template to component is
 called "one way databinding".

One way databinding can be implemented in different ways
 1.interpolation
 2.property binding
 3.stylebinding
 4.event binding
 5.attribute binding

Interpolation

Mixing component variable with html element content[text] using an expression
 is called "interpolation"
*syntax:
    <tagname>
   text {{varname1}}  text {{varname2}}
    </tagname>
*interpolation requires double curly braces[ {{}} ]

Example

I am going to use  the previous example 
https://dotnetbyudayrajakonda.blogspot.com/2023/10/working-with-bootstrap-multiple.html

And add few changes to it.

Go to header component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-header',
  template: `
  <table style="margin:30px">
   <tr>
   <td>
     <img src="../assets/uday.png" height="120" width="120">
   </td>
   <td>
     <h2>Dot Net By Rajakonda Uday..</h2>
     <h2>Hyderabad</h2> 
   </td>
   </tr>
  </table>
  <app-body></app-body>
`,
styles: [
"td{padding:10px},h2{color:blue}"
]
})
export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}


bodycomponent.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent {
  FirstName: string = 'Rajakonda Uday';
  LastName: string = 'Kumar';
}


bodycomponent.html

<div>
    Welcome To My Site. 
    ...<h1> {{FirstName + ' ' + LastName}} </h1> 
     </div>


Output















Angular Interpolation with hardcoded string:
Change the ..html file code to 

<div>
    Welcome To My Site. 
    <h1> {{ 'First Name : '+ FirstName + ', Last Name : ' + LastName }} </h1>    
     </div>


Output









Interpolation in Angular with Ternary Operator:

.html changes(if last name is available then last name will be displayed. else 
it will display as not available)


<div>
    Welcome To My Site. 
    <h1> {{ 'First Name : '+ FirstName }}  {{' Last Name : ' + LastName ? LastName : 'Not Available' }} </h1>    
     </div>

Output




If last name is not available

.ts file changes

import { Component } from '@angular/core';
@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent {
  FirstName: string = 'Rajakonda Uday';
  LastName: string | null = null;
}


Output














Interpolation with Methods

.ts changes

import { Component } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent {
  FirstName: string = 'Rajakonda Uday';
  LastName: string | null = 'Kumar';
  GetFullName() : string{
    return this.FirstName + ' ' + this.LastName;
  }
}

.html changes