What is a dehydrated detector and how am I using one here?

Question

I'm using a simple directive to focus a text input when the element is active using *ngIf. This is contained within a *ngFor loop.

When the first *ngIf is activated, the input focuses as expected. When another input is activated I get the error:

EXCEPTION: Attempt to use a dehydrated detector.

I don't understand what this means and how I can prevent the error. The functionality still works even with the error.

@Directive({
    selector: '[myAutoFocus]'
})
export class AutoFocusDirective {
    constructor(private elem: ElementRef) {
        window.setTimeout(function() {
            elem.nativeElement.querySelector('input').focus();
        });
    }
}

```

Answer 1

Dehydrated detector is a component that has been removed from the change detection system, usually because it has been unmounted from DOM by *ngIf or other means: If there's an asynchronous action in the application that hits this already unmounted detector, error is thrown: solution is to use [hidden] instead of *ngIf on the affected component, or defer the offending action to next tick using setTimeout( () => this.offendingAction(), 0)