What's the difference between Angular property and attribute binding?

WHAT THIS TESTS: This question tests whether you understand Angular's template binding mechanics at the DOM level. Interviewers want to see that you know property bindings interact with the element's DOM object instance, while attribute bindings interact with the HTML markup attribute. It also checks if you can identify cases where a DOM property does not exist for a given HTML attribute, forcing you to use the attr prefix.

A GOOD ANSWER COVERS: First, explain that square bracket syntax without a prefix writes to a DOM property. For example, binding disabled on a native button element sets the disabled property on the HTMLButtonElement instance in the DOM. Second, explain that the attr prefix tells Angular to set the HTML attribute instead of the DOM property, such as writing attr role to set the role attribute on the underlying element. Third, state the rule of thumb from the documentation: use attribute binding when you need to set HTML attributes that do not have corresponding DOM properties. Fourth, mention that the same square bracket syntax works for component and directive inputs, but the distinction between property and attribute binding matters most for native HTML elements.

COMMON WRONG ANSWERS: A major red flag is claiming that properties and attributes are always synchronized or identical. Another wrong answer is saying that value and attr value behave the same way in all scenarios. Some candidates incorrectly state that Angular always uses attributes under the hood, or that you should default to attr bindings for everything. Failing to provide a concrete example where attribute binding is required, such as SVG attributes or the role attribute, also weakens the answer.

LIKELY FOLLOW-UPS: An interviewer might ask what happens when a property and attribute have the same name but different values, or how change detection interacts with each binding type. They might also ask you to name other scenarios where attribute binding is necessary beyond SVG and ARIA, or how binding to component inputs differs from binding to native DOM properties.

ONE CONCRETE EXAMPLE: Suppose you have an unordered list element and you need to dynamically set its ARIA role based on component state. Because you are setting an HTML attribute that does not have a corresponding DOM property in the way the framework expects, you write ul with attr role binding equals listRole parentheses. In the component class, listRole is a signal or property that returns a string such as listbox. When the signal changes, Angular updates the role attribute in the actual HTML markup. If you tried to use plain square brackets role without the attr prefix, Angular would attempt to set a DOM property that does not exist for this purpose on the element instance, so the binding would not work as intended.

Source: angular.dev