What I'm Doing
I have a component that hides/shows using *ngIf
based on a simple Boolean. When the component becomes visible I want to apply focus to a child element within its template.
The Problem
If I flip the Boolean value the component shows correctly but if I then try and get a reference to the child element using this._elRef.nativeElement.querySelector("div#test")
it just comes back null
. If I wait a few seconds the same code will return the reference to the element as I expected.
Speculation
I'm assuming that after flipping the Boolean angular goes through a whole rendering cycle to reveal the newly visible component and that this has not finished by the time I apply the querySelector()
in the next line.
What I'd Like To Know
So what I'm wondering is, how can I be sure that my ngIf
has taken effect and the elements are their in the DOM to be selected?
Is there such a thing as a callback for ngIf
or can I force the view to update and get a callback from that?
I hope this makes sense. It has been a long day (long week) and I'm super tired.
Thanks all
If it helps, I'm using Angular2 v2.0.0-beta.15
the next time that parent component data changes and its change detection triggered also check for changes in child component because you reserved this check by calling markForCheck() in the previous time, again *ngIf react to changes before its container, so it gets and replaces dom with the old data.
Use double equal to == operator to check equality or better use === to check strict equality. You should use === in Javascript instead.
NgIflink. A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause.
The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form.
If you flip the boolean value to true
and in the next line of code you try to get a reference to the component or DOM element controlled by NgIf... well, that component or DOM element doesn't exist yet. Angular doesn't run in parallel with your code. Your JavaScript callback has to finish, then Angular (change detection) runs, which will notice the boolean value change and create the component or DOM element and insert it into the DOM.
To fix your issue, call setTimeout(callbackFn, 0)
after you flip the boolean value. This adds your callbackFn
to the JavaScript message queue. This will ensure that Angular (change detection) runs before your callback function. Hence, when your callbackFn
executes, the element you want to focus should now exist. Using setTimeout(..., 0)
ensures that your callbackFn
gets called in the next turn of the JavaScript event loop.
This technique of using setTimeout(..., 0)
is used in the LifeCycle hooks dev guide when discussing the AfterView* hooks.
Here are a few other examples, if you need more details:
focus
This question is fairly old, and the current solution may not have been available at that time.
The setTimeout()
method is perfectly viable, but has a significant downside. If you just set a class to position an element, like I did, you get a jumpy result, since the code is executed after the angular loop.
Using ChangeDetectorRef
produces a result that does not jump.
So instead of this:
class Foo { public isDisplayed = false; constructor(@Inject(ElementRef) private elementRef: ElementRef) { } public someMethod(): void { this.isDisplayed = true; setTimeout(() => { const child = this.elementRef.nativeElement.querySelector('.child-element'); // ... }); } }
You could do this:
class Foo { public isDisplayed = false; constructor(@Inject(ElementRef) private elementRef: ElementRef, @Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) { } public someMethod(): void { this.isDisplayed = true; this.changeDetectorRef.detectChanges(); const child = this.elementRef.nativeElement.querySelector('.child-element'); // ... } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With