gistfile1.txt

// There are four types of databibding in Angular

// Interpolation  - one way data binding - data flows from component to view ={{data}} Display data 

// Property Binding - one way data binding - data flows from component to view = [property]="data"  Set element property value

// event binding - one way data binding - data flows from view to component = (event)="expression"  Respond to user events

// two way data binding - two way data binding - data flows from component to view and view to component = [(ngModel)]="data"  Respond to user events and update properties


// Html 

<img [src]="imgSource" 
[style.height.px]="height" 
[style.width.px]="width"
(mouseup)="setDefaultSize()"
/>
<hr/>

<button (click)="setImageSize()">Set the image</button>
<br/>
<br/>
<input type="text" [(ngModel)]="height" placeholder="enter your name" />
<h2>Hello {{Name}}</h2>


// Component class 


import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-invoice',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './invoice.component.html',
  styleUrl: './invoice.component.css'
})
export class InvoiceComponent {
  Name = "India";  // would come from API 
  Counter = 99; // would come from API
  height = 200; 
  width = 200;
  
  imgSource = '../assets/a.jpeg';

  setImageSize(){
    this.height = this.height + 100;
    this.width = this.width + 100;
  }
  setDefaultSize(){
    this.height = 200;
    this.width = 200;
  }
}