Get element of nonpermanent nested child component
I have a parent Component, that after some actions will call a child component after an ngIf returns true, and this child component has an Input element that I want to focus. Because the child component is not instantiated when the parent is, using ViewChild doesn't seem to be working for me. I am getting close to a good strategy to focus this input with a service, but actually managing to get a reference to this input when needed I am finding to be difficult.
angular angular5 autofocus
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
add a comment |
I have a parent Component, that after some actions will call a child component after an ngIf returns true, and this child component has an Input element that I want to focus. Because the child component is not instantiated when the parent is, using ViewChild doesn't seem to be working for me. I am getting close to a good strategy to focus this input with a service, but actually managing to get a reference to this input when needed I am finding to be difficult.
angular angular5 autofocus
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
1
Did you try focusing on the input element onInit() of the child component?
– Abhidev
Nov 13 '18 at 20:21
add a comment |
I have a parent Component, that after some actions will call a child component after an ngIf returns true, and this child component has an Input element that I want to focus. Because the child component is not instantiated when the parent is, using ViewChild doesn't seem to be working for me. I am getting close to a good strategy to focus this input with a service, but actually managing to get a reference to this input when needed I am finding to be difficult.
angular angular5 autofocus
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
I have a parent Component, that after some actions will call a child component after an ngIf returns true, and this child component has an Input element that I want to focus. Because the child component is not instantiated when the parent is, using ViewChild doesn't seem to be working for me. I am getting close to a good strategy to focus this input with a service, but actually managing to get a reference to this input when needed I am finding to be difficult.
angular angular5 autofocus
angular angular5 autofocus
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
asked Nov 13 '18 at 20:18
Melvin GruschowMelvin Gruschow
113
113
1
Did you try focusing on the input element onInit() of the child component?
– Abhidev
Nov 13 '18 at 20:21
add a comment |
1
Did you try focusing on the input element onInit() of the child component?
– Abhidev
Nov 13 '18 at 20:21
1
1
Did you try focusing on the input element onInit() of the child component?
– Abhidev
Nov 13 '18 at 20:21
Did you try focusing on the input element onInit() of the child component?
– Abhidev
Nov 13 '18 at 20:21
add a comment |
1 Answer
1
active
oldest
votes
You can try setting the autofocus attribute of the input.
<input ... autofocus="true">
If that doesn't work, then you can create a directive that will force the input to receive focus after the DOM element is created. Here is a directive that I've been using and it has the option to delay the setting of the focus by JS digests which is handy for some difficult component arrangements.
@Directive({
selector: '[ui-focus]'
})
export class FocusDirective implements AfterViewInit {
/**
* The number of JavaScript digestions to complete before setting focus.
*/
@Input()
public focusDelay: string | boolean | number = 0;
/**
* Conditionally control if focus should be set.
*/
@Input()
public focusEnabled: boolean = true;
private counter: number;
public constructor(private el: ElementRef) {
}
public ngAfterViewInit(): void {
if (Boolean(this.focusEnabled)) {
this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
this.setFocus();
}
}
private setFocus() {
if (this.counter <= 0) {
(<HTMLElement>this.el.nativeElement).focus();
} else {
this.counter--;
window.setTimeout(() => this.setFocus());
}
}
}
You can then assign the directive to the input control.
<input ... ui-focus>
You shouldn't have to do anything more complicated than this (i.e. no need for a service).
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288872%2fget-element-of-nonpermanent-nested-child-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can try setting the autofocus attribute of the input.
<input ... autofocus="true">
If that doesn't work, then you can create a directive that will force the input to receive focus after the DOM element is created. Here is a directive that I've been using and it has the option to delay the setting of the focus by JS digests which is handy for some difficult component arrangements.
@Directive({
selector: '[ui-focus]'
})
export class FocusDirective implements AfterViewInit {
/**
* The number of JavaScript digestions to complete before setting focus.
*/
@Input()
public focusDelay: string | boolean | number = 0;
/**
* Conditionally control if focus should be set.
*/
@Input()
public focusEnabled: boolean = true;
private counter: number;
public constructor(private el: ElementRef) {
}
public ngAfterViewInit(): void {
if (Boolean(this.focusEnabled)) {
this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
this.setFocus();
}
}
private setFocus() {
if (this.counter <= 0) {
(<HTMLElement>this.el.nativeElement).focus();
} else {
this.counter--;
window.setTimeout(() => this.setFocus());
}
}
}
You can then assign the directive to the input control.
<input ... ui-focus>
You shouldn't have to do anything more complicated than this (i.e. no need for a service).
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
add a comment |
You can try setting the autofocus attribute of the input.
<input ... autofocus="true">
If that doesn't work, then you can create a directive that will force the input to receive focus after the DOM element is created. Here is a directive that I've been using and it has the option to delay the setting of the focus by JS digests which is handy for some difficult component arrangements.
@Directive({
selector: '[ui-focus]'
})
export class FocusDirective implements AfterViewInit {
/**
* The number of JavaScript digestions to complete before setting focus.
*/
@Input()
public focusDelay: string | boolean | number = 0;
/**
* Conditionally control if focus should be set.
*/
@Input()
public focusEnabled: boolean = true;
private counter: number;
public constructor(private el: ElementRef) {
}
public ngAfterViewInit(): void {
if (Boolean(this.focusEnabled)) {
this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
this.setFocus();
}
}
private setFocus() {
if (this.counter <= 0) {
(<HTMLElement>this.el.nativeElement).focus();
} else {
this.counter--;
window.setTimeout(() => this.setFocus());
}
}
}
You can then assign the directive to the input control.
<input ... ui-focus>
You shouldn't have to do anything more complicated than this (i.e. no need for a service).
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
add a comment |
You can try setting the autofocus attribute of the input.
<input ... autofocus="true">
If that doesn't work, then you can create a directive that will force the input to receive focus after the DOM element is created. Here is a directive that I've been using and it has the option to delay the setting of the focus by JS digests which is handy for some difficult component arrangements.
@Directive({
selector: '[ui-focus]'
})
export class FocusDirective implements AfterViewInit {
/**
* The number of JavaScript digestions to complete before setting focus.
*/
@Input()
public focusDelay: string | boolean | number = 0;
/**
* Conditionally control if focus should be set.
*/
@Input()
public focusEnabled: boolean = true;
private counter: number;
public constructor(private el: ElementRef) {
}
public ngAfterViewInit(): void {
if (Boolean(this.focusEnabled)) {
this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
this.setFocus();
}
}
private setFocus() {
if (this.counter <= 0) {
(<HTMLElement>this.el.nativeElement).focus();
} else {
this.counter--;
window.setTimeout(() => this.setFocus());
}
}
}
You can then assign the directive to the input control.
<input ... ui-focus>
You shouldn't have to do anything more complicated than this (i.e. no need for a service).
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
You can try setting the autofocus attribute of the input.
<input ... autofocus="true">
If that doesn't work, then you can create a directive that will force the input to receive focus after the DOM element is created. Here is a directive that I've been using and it has the option to delay the setting of the focus by JS digests which is handy for some difficult component arrangements.
@Directive({
selector: '[ui-focus]'
})
export class FocusDirective implements AfterViewInit {
/**
* The number of JavaScript digestions to complete before setting focus.
*/
@Input()
public focusDelay: string | boolean | number = 0;
/**
* Conditionally control if focus should be set.
*/
@Input()
public focusEnabled: boolean = true;
private counter: number;
public constructor(private el: ElementRef) {
}
public ngAfterViewInit(): void {
if (Boolean(this.focusEnabled)) {
this.counter = this.focusDelay === true ? 1 : parseInt(this.focusDelay + '', 10);
this.setFocus();
}
}
private setFocus() {
if (this.counter <= 0) {
(<HTMLElement>this.el.nativeElement).focus();
} else {
this.counter--;
window.setTimeout(() => this.setFocus());
}
}
}
You can then assign the directive to the input control.
<input ... ui-focus>
You shouldn't have to do anything more complicated than this (i.e. no need for a service).
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
answered Nov 13 '18 at 20:33
cgTagcgTag
23.5k862110
23.5k862110
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
add a comment |
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
I have tried out the autofocus property, but the situation is slightly more complicated in that this input can appear and reappear multiple times, and autofocus does not seem to work after the first instance. I will give some of these other tricks a try and see.
– Melvin Gruschow
Nov 13 '18 at 20:39
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288872%2fget-element-of-nonpermanent-nested-child-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
1
Did you try focusing on the input element onInit() of the child component?
– Abhidev
Nov 13 '18 at 20:21