Binding in Angular v17

Question

In this post, we will discuss the topic of Binding in the latest version of Angular 17.

What's Binding in Angular?

Binding is a concept in Angular that facilitates the communication between components and the DOM.

What are the types of binding in angular?

In Angular, there are four types of bindings, with three being one-way bindings and one being two-way binding.

One-Way Binding

1) Interpolation {{}}

• Binding occurs from the Component to the View​
  Component Code:

  export class TestComponent 
  {
    message : string ; 
    
    constructor() {
      this.message = "Welcome to Angular v.17" ;
    }
  }

  View Code:

  {{message}}

  Result:
  

2) Property Binding []

• Binding occurs from the Component to the View

  Component Code:

  export class TestComponent 
  {
    imageSource : string ;
    
    constructor() {
      this.imageSource = "https://fakeimg.pl/350x200/?text=Hello" ;
    }
  }

  View Code:

  <img [src]="imageSource">

  Result:
  

3) Event Binding (event)=" "

• Binding occurs from the Component to the View

  Component Code:

  export class TestComponent 
  {
    imageSource : string ;
    isHidden : boolean = true ;
  
    constructor() {
      this.imageSource = "https://fakeimg.pl/350x200/?text=Hello" ;
    }
  
    changeToggle(){
      this.isHidden =! this.isHidden;
    }
  }

  View Code:

  @if (isHidden) {
      <img [src]="imageSource">
  }
  
  <button (click)="changeToggle()">Change Toggle</button>
  
  {{isHidden}}

  Result:
  
  

Two-Way Binding 

[(ngModel)]=" "

• It allows you to synchronize the values between the component and the view
  ​​​​​​Component Code:

  public userName : string;
    constructor() 
    { 
        this.userName = "two way Binding";
    }

  View Code:

  <input
  type="text" 
  name="userName"
  [(ngModel)]="userName" 
  />
  
  
  
  <h1>Selected Value : {{userName }}</h1>

  Result :
  
  

---

Conclusion

We have effectively explored various methods for data binding in Angular v17 through practical examples.