Posted by: Stewart Roberts
Date: Fri Sep 19 2025
Debugging Angular Input Binding
When @Input() Won’t Update
I recently ran into this exact issue when working on a textarea component with conditional hover tooltips. Here’s how the journey unfolded.
The Setup
I had a parent component passing a displayHover flag down to a child textarea component.
In the parent template I bound [displayHover] to the child and also displayed it in atag.
In the child template I used *ngIf=“displayHover” to conditionally show a hover-enabled textarea.
The parent logic was simple:
If the fieldName was “ground” and the data value matched one of two specific strings, then set displayHover = true. Otherwise, set it to false.
Everything looked right. The console showed the value was being set to true. But the parent template never updated.
The Weird Behavior
- Setting displayHover = true outside the if block updated the template just fine.
- Inside the if, it logged true but the template never refreshed.
- Even ChangeDetectorRef.detectChanges() and NgZone.run() didn’t fix it.
- Debugging further showed that Angular was dealing with different component instances depending on where the value was set.
At this point, the bug had gone from frustrating to fascinating.
The Fix: Centralizing State
The solution was to move hover state management into a service.
The service contained a BehaviorSubject that exposed an observable called displayHover$. Whenever I wanted to update the hover state, I called hoverService.setHover(true) or hoverService.setHover(false).
In the parent, instead of mutating this.displayHover directly, I pushed state updates into the service inside the same if/else logic.
In the template, I updated the binding to use the async pipe:
[displayHover]=“config.fieldName === ‘justification’ && (hoverService.displayHover$ | async)”
Why It Works
Angular’s change detection can get tripped up when:
- Multiple instances of a component are created or destroyed under *ngIf
- Local state is mutated in a branch where Angular doesn’t run another detection pass
- Inputs and templates are relying on slightly different component instances
By centralizing the state in a service, I decoupled the hover logic from the component lifecycle. Angular’s async pipe took care of subscribing and unsubscribing automatically, and the UI now updated consistently.
Key Takeaways
- If @Input() isn’t updating, check whether multiple component instances are being created.
- Prefer reactive state (BehaviorSubject and Observable) over simple booleans when multiple components need to stay in sync.
- Push logic into services when you notice scope or lifecycle quirks.
- Debugging Angular often requires testing outside the suspicious if to confirm scoping issues.
After days of head-scratching, the fix was just a clean, reactive service and one line in the template. Sometimes, the best fix is also the simplest.