Angular6 AutoFocus using *ngIf










1















<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()" />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>


After clicking the dropDownContainer i would like the dropdownList to appear and have focus put on it.



I Have tried using



 @ViewChild("tref", read: ElementRef) tref: ElementRef; 


method, but it returns undefined because that element doesnt exist in the DOM until the above div is clicked. How can I autofocus on a dynamic NON INPUT DOM object?



EDIT Updated my code per suggestions, this still will not autofocus on the div.



 @ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
this.tref.nativeElement.focus();
console.log(this.tref);

HideDropDown()
console.log('test out')
this.showDropDown = 0;




<input #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" >this is my test</div>


ANSWER TO THE PROBLEM
Two fold answer.



1) DIVS cannot have focus unless they have tabindex. Stack answer



2)I need to include setTimeout(() => this.tref.nativeElement.focus(), 1); because an element that is hidden is not automatically ready to receive focus.



3)*ngIf and hidden both worked, once i put in the above fixes



Cleaned up code



import Component, ElementRef , ViewChild from '@angular/core';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
)
export class AppComponent

constructor()


showDropDown = 0;



@ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);


HideDropDown()
this.showDropDown = 0;


test() console.log('works');



<div tabindex="-2" class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>









share|improve this question
























  • Try with <div tabindex="-1" *ngIf="showDropDown

    – Whisher
    Nov 15 '18 at 21:24











  • There should be a way to make it work with ngIf, and without setTimeout.

    – ConnorsFan
    Nov 15 '18 at 22:04












  • @ConnorsFan you are correct hidden is not needed, i will update my post

    – gh9
    Nov 15 '18 at 22:07











  • You also don't need setTimeout. See my answer below.

    – ConnorsFan
    Nov 15 '18 at 22:37















1















<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()" />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>


After clicking the dropDownContainer i would like the dropdownList to appear and have focus put on it.



I Have tried using



 @ViewChild("tref", read: ElementRef) tref: ElementRef; 


method, but it returns undefined because that element doesnt exist in the DOM until the above div is clicked. How can I autofocus on a dynamic NON INPUT DOM object?



EDIT Updated my code per suggestions, this still will not autofocus on the div.



 @ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
this.tref.nativeElement.focus();
console.log(this.tref);

HideDropDown()
console.log('test out')
this.showDropDown = 0;




<input #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" >this is my test</div>


ANSWER TO THE PROBLEM
Two fold answer.



1) DIVS cannot have focus unless they have tabindex. Stack answer



2)I need to include setTimeout(() => this.tref.nativeElement.focus(), 1); because an element that is hidden is not automatically ready to receive focus.



3)*ngIf and hidden both worked, once i put in the above fixes



Cleaned up code



import Component, ElementRef , ViewChild from '@angular/core';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
)
export class AppComponent

constructor()


showDropDown = 0;



@ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);


HideDropDown()
this.showDropDown = 0;


test() console.log('works');



<div tabindex="-2" class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>









share|improve this question
























  • Try with <div tabindex="-1" *ngIf="showDropDown

    – Whisher
    Nov 15 '18 at 21:24











  • There should be a way to make it work with ngIf, and without setTimeout.

    – ConnorsFan
    Nov 15 '18 at 22:04












  • @ConnorsFan you are correct hidden is not needed, i will update my post

    – gh9
    Nov 15 '18 at 22:07











  • You also don't need setTimeout. See my answer below.

    – ConnorsFan
    Nov 15 '18 at 22:37













1












1








1








<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()" />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>


After clicking the dropDownContainer i would like the dropdownList to appear and have focus put on it.



I Have tried using



 @ViewChild("tref", read: ElementRef) tref: ElementRef; 


method, but it returns undefined because that element doesnt exist in the DOM until the above div is clicked. How can I autofocus on a dynamic NON INPUT DOM object?



EDIT Updated my code per suggestions, this still will not autofocus on the div.



 @ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
this.tref.nativeElement.focus();
console.log(this.tref);

HideDropDown()
console.log('test out')
this.showDropDown = 0;




<input #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" >this is my test</div>


ANSWER TO THE PROBLEM
Two fold answer.



1) DIVS cannot have focus unless they have tabindex. Stack answer



2)I need to include setTimeout(() => this.tref.nativeElement.focus(), 1); because an element that is hidden is not automatically ready to receive focus.



3)*ngIf and hidden both worked, once i put in the above fixes



Cleaned up code



import Component, ElementRef , ViewChild from '@angular/core';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
)
export class AppComponent

constructor()


showDropDown = 0;



@ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);


HideDropDown()
this.showDropDown = 0;


test() console.log('works');



<div tabindex="-2" class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>









share|improve this question
















<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()" />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>


After clicking the dropDownContainer i would like the dropdownList to appear and have focus put on it.



I Have tried using



 @ViewChild("tref", read: ElementRef) tref: ElementRef; 


method, but it returns undefined because that element doesnt exist in the DOM until the above div is clicked. How can I autofocus on a dynamic NON INPUT DOM object?



EDIT Updated my code per suggestions, this still will not autofocus on the div.



 @ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
this.tref.nativeElement.focus();
console.log(this.tref);

HideDropDown()
console.log('test out')
this.showDropDown = 0;




<input #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" >this is my test</div>


ANSWER TO THE PROBLEM
Two fold answer.



1) DIVS cannot have focus unless they have tabindex. Stack answer



2)I need to include setTimeout(() => this.tref.nativeElement.focus(), 1); because an element that is hidden is not automatically ready to receive focus.



3)*ngIf and hidden both worked, once i put in the above fixes



Cleaned up code



import Component, ElementRef , ViewChild from '@angular/core';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
)
export class AppComponent

constructor()


showDropDown = 0;



@ViewChild("tref") tref: ElementRef;
ShowDropDown()
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);


HideDropDown()
this.showDropDown = 0;


test() console.log('works');



<div tabindex="-2" class="dropdownContainer" placeholder="george" (click)="ShowDropDown()" ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList" style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>






angular






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 22:06







gh9

















asked Nov 15 '18 at 21:19









gh9gh9

4,16664479




4,16664479












  • Try with <div tabindex="-1" *ngIf="showDropDown

    – Whisher
    Nov 15 '18 at 21:24











  • There should be a way to make it work with ngIf, and without setTimeout.

    – ConnorsFan
    Nov 15 '18 at 22:04












  • @ConnorsFan you are correct hidden is not needed, i will update my post

    – gh9
    Nov 15 '18 at 22:07











  • You also don't need setTimeout. See my answer below.

    – ConnorsFan
    Nov 15 '18 at 22:37

















  • Try with <div tabindex="-1" *ngIf="showDropDown

    – Whisher
    Nov 15 '18 at 21:24











  • There should be a way to make it work with ngIf, and without setTimeout.

    – ConnorsFan
    Nov 15 '18 at 22:04












  • @ConnorsFan you are correct hidden is not needed, i will update my post

    – gh9
    Nov 15 '18 at 22:07











  • You also don't need setTimeout. See my answer below.

    – ConnorsFan
    Nov 15 '18 at 22:37
















Try with <div tabindex="-1" *ngIf="showDropDown

– Whisher
Nov 15 '18 at 21:24





Try with <div tabindex="-1" *ngIf="showDropDown

– Whisher
Nov 15 '18 at 21:24













There should be a way to make it work with ngIf, and without setTimeout.

– ConnorsFan
Nov 15 '18 at 22:04






There should be a way to make it work with ngIf, and without setTimeout.

– ConnorsFan
Nov 15 '18 at 22:04














@ConnorsFan you are correct hidden is not needed, i will update my post

– gh9
Nov 15 '18 at 22:07





@ConnorsFan you are correct hidden is not needed, i will update my post

– gh9
Nov 15 '18 at 22:07













You also don't need setTimeout. See my answer below.

– ConnorsFan
Nov 15 '18 at 22:37





You also don't need setTimeout. See my answer below.

– ConnorsFan
Nov 15 '18 at 22:37












2 Answers
2






active

oldest

votes


















1














You can focus the dropdown element as soon as it becomes visible, with the help of ViewChildren and the QueryList.changes event. This technique works no matter how long it takes for the element to appear in the view.



In the template, give a tabindex attribute to the dropdown div:



<div class="dropdownContainer" (click)="showDropDown = true">
Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
This is the dropdown element
</div>


In code, retrieve the dropdown element with ViewChildren, and set the QueryList.changes event handler in ngAfterViewInit. When you are notified that the element has become visible, you can set the focus on it:



showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit()
this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) =>
if (list.length > 0)
list.first.nativeElement.focus();

);



See this stackblitz for a demo.






share|improve this answer

























  • would I need to unsubscribe on destroy?

    – gh9
    Nov 16 '18 at 14:38












  • According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

    – ConnorsFan
    Nov 16 '18 at 14:45












  • nice find, thank you for working on this issue

    – gh9
    Nov 16 '18 at 15:01











  • You are welcome. :-)

    – ConnorsFan
    Nov 16 '18 at 15:02


















1














Change from *ngIf="showDropDown" to [hidden]="! showDropDown" and you should be able to use @ViewChild inside the component and prevent the "undefiend" issue.



If that still didn't work, you could always pass the element to the component through the click event by changing the click to this (click)="ShowDropDown(tref)". Note that in order for this to work, you'd still need to change *ngIf to [hidden].






share|improve this answer

























  • Thank you for the help, but it still wont autofocus on the div

    – gh9
    Nov 15 '18 at 21:48











  • @gh9 Check the answers here > stackoverflow.com/questions/38307060/…

    – Uğur Dinç
    Nov 15 '18 at 21:51











  • Thank you very much! that worked I will also update my post with what worked

    – gh9
    Nov 15 '18 at 22:01











  • If you update your answer i will vote it correct

    – gh9
    Nov 15 '18 at 22:01











  • Thank you for your help

    – gh9
    Nov 16 '18 at 15:02










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328041%2fangular6-autofocus-using-ngif%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














You can focus the dropdown element as soon as it becomes visible, with the help of ViewChildren and the QueryList.changes event. This technique works no matter how long it takes for the element to appear in the view.



In the template, give a tabindex attribute to the dropdown div:



<div class="dropdownContainer" (click)="showDropDown = true">
Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
This is the dropdown element
</div>


In code, retrieve the dropdown element with ViewChildren, and set the QueryList.changes event handler in ngAfterViewInit. When you are notified that the element has become visible, you can set the focus on it:



showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit()
this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) =>
if (list.length > 0)
list.first.nativeElement.focus();

);



See this stackblitz for a demo.






share|improve this answer

























  • would I need to unsubscribe on destroy?

    – gh9
    Nov 16 '18 at 14:38












  • According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

    – ConnorsFan
    Nov 16 '18 at 14:45












  • nice find, thank you for working on this issue

    – gh9
    Nov 16 '18 at 15:01











  • You are welcome. :-)

    – ConnorsFan
    Nov 16 '18 at 15:02















1














You can focus the dropdown element as soon as it becomes visible, with the help of ViewChildren and the QueryList.changes event. This technique works no matter how long it takes for the element to appear in the view.



In the template, give a tabindex attribute to the dropdown div:



<div class="dropdownContainer" (click)="showDropDown = true">
Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
This is the dropdown element
</div>


In code, retrieve the dropdown element with ViewChildren, and set the QueryList.changes event handler in ngAfterViewInit. When you are notified that the element has become visible, you can set the focus on it:



showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit()
this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) =>
if (list.length > 0)
list.first.nativeElement.focus();

);



See this stackblitz for a demo.






share|improve this answer

























  • would I need to unsubscribe on destroy?

    – gh9
    Nov 16 '18 at 14:38












  • According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

    – ConnorsFan
    Nov 16 '18 at 14:45












  • nice find, thank you for working on this issue

    – gh9
    Nov 16 '18 at 15:01











  • You are welcome. :-)

    – ConnorsFan
    Nov 16 '18 at 15:02













1












1








1







You can focus the dropdown element as soon as it becomes visible, with the help of ViewChildren and the QueryList.changes event. This technique works no matter how long it takes for the element to appear in the view.



In the template, give a tabindex attribute to the dropdown div:



<div class="dropdownContainer" (click)="showDropDown = true">
Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
This is the dropdown element
</div>


In code, retrieve the dropdown element with ViewChildren, and set the QueryList.changes event handler in ngAfterViewInit. When you are notified that the element has become visible, you can set the focus on it:



showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit()
this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) =>
if (list.length > 0)
list.first.nativeElement.focus();

);



See this stackblitz for a demo.






share|improve this answer















You can focus the dropdown element as soon as it becomes visible, with the help of ViewChildren and the QueryList.changes event. This technique works no matter how long it takes for the element to appear in the view.



In the template, give a tabindex attribute to the dropdown div:



<div class="dropdownContainer" (click)="showDropDown = true">
Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
This is the dropdown element
</div>


In code, retrieve the dropdown element with ViewChildren, and set the QueryList.changes event handler in ngAfterViewInit. When you are notified that the element has become visible, you can set the focus on it:



showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit()
this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) =>
if (list.length > 0)
list.first.nativeElement.focus();

);



See this stackblitz for a demo.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 16 '18 at 1:29

























answered Nov 15 '18 at 22:27









ConnorsFanConnorsFan

31.5k43163




31.5k43163












  • would I need to unsubscribe on destroy?

    – gh9
    Nov 16 '18 at 14:38












  • According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

    – ConnorsFan
    Nov 16 '18 at 14:45












  • nice find, thank you for working on this issue

    – gh9
    Nov 16 '18 at 15:01











  • You are welcome. :-)

    – ConnorsFan
    Nov 16 '18 at 15:02

















  • would I need to unsubscribe on destroy?

    – gh9
    Nov 16 '18 at 14:38












  • According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

    – ConnorsFan
    Nov 16 '18 at 14:45












  • nice find, thank you for working on this issue

    – gh9
    Nov 16 '18 at 15:01











  • You are welcome. :-)

    – ConnorsFan
    Nov 16 '18 at 15:02
















would I need to unsubscribe on destroy?

– gh9
Nov 16 '18 at 14:38






would I need to unsubscribe on destroy?

– gh9
Nov 16 '18 at 14:38














According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

– ConnorsFan
Nov 16 '18 at 14:45






According to this answer, you wouldn't have to. I made a stackblitz to show that it closes automatically.

– ConnorsFan
Nov 16 '18 at 14:45














nice find, thank you for working on this issue

– gh9
Nov 16 '18 at 15:01





nice find, thank you for working on this issue

– gh9
Nov 16 '18 at 15:01













You are welcome. :-)

– ConnorsFan
Nov 16 '18 at 15:02





You are welcome. :-)

– ConnorsFan
Nov 16 '18 at 15:02













1














Change from *ngIf="showDropDown" to [hidden]="! showDropDown" and you should be able to use @ViewChild inside the component and prevent the "undefiend" issue.



If that still didn't work, you could always pass the element to the component through the click event by changing the click to this (click)="ShowDropDown(tref)". Note that in order for this to work, you'd still need to change *ngIf to [hidden].






share|improve this answer

























  • Thank you for the help, but it still wont autofocus on the div

    – gh9
    Nov 15 '18 at 21:48











  • @gh9 Check the answers here > stackoverflow.com/questions/38307060/…

    – Uğur Dinç
    Nov 15 '18 at 21:51











  • Thank you very much! that worked I will also update my post with what worked

    – gh9
    Nov 15 '18 at 22:01











  • If you update your answer i will vote it correct

    – gh9
    Nov 15 '18 at 22:01











  • Thank you for your help

    – gh9
    Nov 16 '18 at 15:02















1














Change from *ngIf="showDropDown" to [hidden]="! showDropDown" and you should be able to use @ViewChild inside the component and prevent the "undefiend" issue.



If that still didn't work, you could always pass the element to the component through the click event by changing the click to this (click)="ShowDropDown(tref)". Note that in order for this to work, you'd still need to change *ngIf to [hidden].






share|improve this answer

























  • Thank you for the help, but it still wont autofocus on the div

    – gh9
    Nov 15 '18 at 21:48











  • @gh9 Check the answers here > stackoverflow.com/questions/38307060/…

    – Uğur Dinç
    Nov 15 '18 at 21:51











  • Thank you very much! that worked I will also update my post with what worked

    – gh9
    Nov 15 '18 at 22:01











  • If you update your answer i will vote it correct

    – gh9
    Nov 15 '18 at 22:01











  • Thank you for your help

    – gh9
    Nov 16 '18 at 15:02













1












1








1







Change from *ngIf="showDropDown" to [hidden]="! showDropDown" and you should be able to use @ViewChild inside the component and prevent the "undefiend" issue.



If that still didn't work, you could always pass the element to the component through the click event by changing the click to this (click)="ShowDropDown(tref)". Note that in order for this to work, you'd still need to change *ngIf to [hidden].






share|improve this answer















Change from *ngIf="showDropDown" to [hidden]="! showDropDown" and you should be able to use @ViewChild inside the component and prevent the "undefiend" issue.



If that still didn't work, you could always pass the element to the component through the click event by changing the click to this (click)="ShowDropDown(tref)". Note that in order for this to work, you'd still need to change *ngIf to [hidden].







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 15 '18 at 21:47

























answered Nov 15 '18 at 21:25









Uğur DinçUğur Dinç

1,402614




1,402614












  • Thank you for the help, but it still wont autofocus on the div

    – gh9
    Nov 15 '18 at 21:48











  • @gh9 Check the answers here > stackoverflow.com/questions/38307060/…

    – Uğur Dinç
    Nov 15 '18 at 21:51











  • Thank you very much! that worked I will also update my post with what worked

    – gh9
    Nov 15 '18 at 22:01











  • If you update your answer i will vote it correct

    – gh9
    Nov 15 '18 at 22:01











  • Thank you for your help

    – gh9
    Nov 16 '18 at 15:02

















  • Thank you for the help, but it still wont autofocus on the div

    – gh9
    Nov 15 '18 at 21:48











  • @gh9 Check the answers here > stackoverflow.com/questions/38307060/…

    – Uğur Dinç
    Nov 15 '18 at 21:51











  • Thank you very much! that worked I will also update my post with what worked

    – gh9
    Nov 15 '18 at 22:01











  • If you update your answer i will vote it correct

    – gh9
    Nov 15 '18 at 22:01











  • Thank you for your help

    – gh9
    Nov 16 '18 at 15:02
















Thank you for the help, but it still wont autofocus on the div

– gh9
Nov 15 '18 at 21:48





Thank you for the help, but it still wont autofocus on the div

– gh9
Nov 15 '18 at 21:48













@gh9 Check the answers here > stackoverflow.com/questions/38307060/…

– Uğur Dinç
Nov 15 '18 at 21:51





@gh9 Check the answers here > stackoverflow.com/questions/38307060/…

– Uğur Dinç
Nov 15 '18 at 21:51













Thank you very much! that worked I will also update my post with what worked

– gh9
Nov 15 '18 at 22:01





Thank you very much! that worked I will also update my post with what worked

– gh9
Nov 15 '18 at 22:01













If you update your answer i will vote it correct

– gh9
Nov 15 '18 at 22:01





If you update your answer i will vote it correct

– gh9
Nov 15 '18 at 22:01













Thank you for your help

– gh9
Nov 16 '18 at 15:02





Thank you for your help

– gh9
Nov 16 '18 at 15:02

















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328041%2fangular6-autofocus-using-ngif%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Top Tejano songwriter Luis Silva dead of heart attack at 64

政党

天津地下鉄3号線