What does template binding mean?
In 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
- Interpolation (
{{ }}) - inserts a component property's value into the template's text.
<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.
<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.
<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.
<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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.