{"id":2401,"date":"2020-03-30T12:05:16","date_gmt":"2020-03-30T12:05:16","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=2401"},"modified":"2020-03-30T12:05:16","modified_gmt":"2020-03-30T12:05:16","slug":"angular-delay-reference-to-ngif-target-until-created","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2401","title":{"rendered":"Angular delay reference to *ngIf target until created"},"content":{"rendered":"<p>I had some code which toggled the value checked by an *ngIf, to cause the *ngIf target to be created.<\/p>\n<p>I then wanted, in the same component method immediately afterwards, to refer to the target (which was a ViewChild)\u00a0 to set focus to it. At that point I got an undefined error, as it had not yet been created and added to the DOM.<\/p>\n<p><strong><a href=\"https:\/\/stackoverflow.com\/a\/37355997\">This post here<\/a><\/strong> details the issue and how to get around it.<\/p>\n<p>Basically, using a setTimeout and setting the focus in its callback solved the problem. The interesting part of the trick detailed in the post was that the timeout could be legitimately set to 0, as all we needed to do was put our\u00a0callback function on the end of the message queue which would always ensure that Angular change detection runs before the setFocus() call. This worked fine, using the following code:-<\/p>\n<blockquote>\n<pre>\/\/ set the state which will trigger the *ngIf to create the focus target\r\nthis.autocompleteState = AutocompleteStates.Initial;\r\n\r\n\/\/ now set the focus as a timeout callback\r\nsetTimeout(() =&gt; this.searchbar.setFocus(), 0);<\/pre>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I had some code which toggled the value checked by an *ngIf, to cause the *ngIf target to be created. I then wanted, in the same component method immediately afterwards, to refer to the target (which was a ViewChild)\u00a0 to set focus to it. At that point I got an undefined error, as it had [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,77],"tags":[],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2401"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2401"}],"version-history":[{"count":1,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2401\/revisions"}],"predecessor-version":[{"id":2402,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2401\/revisions\/2402"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}