5 questions foundWhat are the main types of data binding in Angular?
Beginner Angular supports interpolation for displaying a value in text, property binding for setting an element's property, event binding for responding to user actions, and two way binding for keeping a value and an input field in sync in both directions at once.
@Component({
selector: 'app-example',
template: `
<p>{{ message }}</p> <!-- interpolation -->
<img [src]="imageUrl" /> <!-- property binding -->
<button (click)="onClick()">Click</button> <!-- event binding -->
<input [(ngModel)]="name" /> <!-- two way binding -->
`
})
export class ExampleComponent {
message = 'Hello';
imageUrl = 'logo.png';
name = '';
onClick() { console.log('Clicked'); }
}
Real-world example A profile page combines all four binding types in one form, displaying the current name with interpolation, showing a profile picture with property binding, responding to a save button with event binding, and syncing a name input field with two way binding.
Common follow-ups: What is the difference between property binding using square brackets and simply setting an HTML attribute?;What module needs to be imported to use two way binding with ngModel?
Components & Templates;Forms
How does event binding work in Angular, letting a component respond to a user action?
Beginner You wrap an event name in parentheses inside your template, and set it equal to a method on your component class, which Angular calls automatically whenever that specific event, like a click or a key press, happens on that element.
@Component({
selector: 'app-button',
template: `<button (click)="handleClick()">Save</button>`
})
export class ButtonComponent {
handleClick() {
console.log('Button was clicked');
}
}
Real-world example A save button in a settings page calls a specific method to save the user's changes the moment they click it, using event binding to connect the click directly to that method.
Common follow-ups: How do you access the actual event object, such as which key was pressed, inside an event binding?;Can you bind more than one event to the same element?
Components & Templates;Forms
How does two way binding using the banana in a box syntax, square brackets and parentheses together, actually work behind the scenes?
Intermediate Two way binding is really a combination of a property binding and an event binding happening together. The square brackets set the input's value from your component's property, while the parentheses listen for a change event and update that same property, keeping both sides automatically in sync.
// This shorthand
<input [(ngModel)]="name" />
// Is equivalent to writing it out fully
<input [ngModel]="name" (ngModelChange)="name = $event" />
Real-world example A search input field automatically updates a component's searchTerm property as the user types, and also updates the input's displayed value if searchTerm is changed elsewhere in the code, thanks to two way binding keeping both sides in sync.
Common follow-ups: Could you build your own custom two way binding for a custom component, not just form inputs?;Why must the changed event name always end with the word Change for this shorthand to work?
Forms;Components & Templates
How would you create a custom two way binding for your own component's custom property?
Advanced You define a regular Input property and a matching Output property whose name is the input's name followed by the word Change, emitting the new value whenever it changes. Angular then recognizes this pattern automatically, allowing consumers of your component to use the same banana in a box syntax as with built in form controls.
@Component({
selector: 'app-counter',
template: `<button (click)="increment()">{{ value }}</button>`
})
export class CounterComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
increment() {
this.value++;
this.valueChange.emit(this.value);
}
}
// Used as: <app-counter [(value)]="myCount"></app-counter>
Real-world example A custom counter component supports the same convenient two way binding syntax as a built in form input, letting a parent component keep its own count variable automatically synced with the counter's internal value.
Common follow-ups: What happens if you forget to emit the new value inside the valueChange output?;How is this pattern related to how ngModel itself is implemented internally?
Components & Templates;Angular Signals
How does attribute binding differ from property binding, and when do you actually need to use it?
Intermediate Property binding sets a property directly on the underlying DOM element object, which works for most common cases. Attribute binding, using the attr prefix, is needed specifically for HTML attributes that do not have a corresponding DOM property, such as aria attributes or custom data attributes.
<!-- Property binding, works for most standard properties -->
<img [src]="imageUrl" />
<!-- Attribute binding, needed for attributes with no matching property -->
<td [attr.colspan]="columnSpan"></td>
Real-world example A data table dynamically sets how many columns a cell should span using attribute binding, since colspan does not have a direct matching JavaScript property the way src does on an image element.
Common follow-ups: How do you know whether a specific HTML attribute needs attr binding instead of regular property binding?;What happens if you try to use regular property binding on something like aria-expanded?
Components & Templates;Accessibility (a11y) in Angular