Posted by: Stewart Roberts

Date: Fri Aug 01 2025

Angular Template Binding Gotchas

disabled, <ng-container>, and More

1. Binding to ‘disabled’ incorrectly

If you write:

disabled="isDisabled"

Angular treats this as a static string, not a dynamic binding. So even if your variable is false, the element might still be disabled because any non-empty string is considered truthy.

Correct approach:

Use square brackets for property binding:

[disabled]="isDisabled"

This ensures Angular evaluates the actual boolean value.

2. Accidentally using event binding syntax

Sometimes you might mistakenly write (disabled)="someFunction()". This tells Angular you’re binding to a ‘disabled’ event — but such an event doesn’t exist. This causes an error.

Remember:

Use [] for binding a value or property.

Use () only for actual events like (click) or (input).

3. Trying to use class or disabled on an ng-container

An <ng-container> is a structural directive — it doesn’t render in the DOM. That means you can’t apply CSS classes, attributes like id, or set disabled on it.

Fix:

Wrap your ng-container in a normal HTML element like a <div> or <span> if you need to bind styles or attributes.

4. Trying to disable a non-input element like a span

Elements like <span> or <div> don’t support the disabled attribute. If you want to make them behave like they’re disabled (visually or functionally), you’ll need to use a combination of styling and accessibility attributes.

Common approach:

• Add a disabled class for styling.
• Use pointer-events: none to block interaction.
• Optionally set aria-disabled="true" for screen readers.

Takeaway

Angular is powerful, but mixing up [], (), and trying to bind attributes to invisible or unsupported elements can lead to frustrating bugs. Keep these tips in mind to avoid common mistakes when writing templates.