Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
0 like 0 dislike
1.4k views
in Blog Post by 37 42 54
edited by

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.


If you don’t ask, the answer is always NO!
...