Suggest an editImprove this articleRefine the answer for “What does template binding mean?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Template binding** in Angular is a mechanism through which data from a component is connected to the HTML template and vice versa: it dynamically displays data, reacts to events, and controls element properties. **Key point:** template binding is the means of connecting the component's model and the interface, which makes the display dynamic and interactive.Shown above the full answer for quick recall.Answer (EN)ImageIn Angular, **template binding** is a mechanism through which **data from a component is connected to the HTML template** and vice versa. It allows dynamically displaying data, reacting to events, and controlling element properties. ## Main types of template binding 1. **Interpolation (**`{{ }}`**)** - inserts a component property's value into the template's text. ```html <p>{{ username }}</p> ``` The value of `username` from the component is inserted into `<p>`. 2. **Property binding (**`[property]`**)** - binds a DOM element's or component's property to an expression. ```html <img [src]="userPhotoUrl"> ``` The value of `userPhotoUrl` from the component is assigned to the `src` attribute. 3. **Event binding (**`(event)`**)** - binds a DOM event to a component method. ```html <button (click)="submitForm()">Submit</button> ``` The `submitForm()` method is called when the button is clicked. 4. **Two-way binding (**`[(ngModel)]`**)** - combines property and event binding to synchronize data. ```html <input [(ngModel)]="userName"> ``` Any change in the `input` is immediately reflected in `userName` and vice versa. In other words, template binding is the **means of connecting the component's model and the interface**, which makes the display dynamic and interactive.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.