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