Set focus on Child component textbox from Parent component in Angular [duplicate]

Question

I am trying to set focus on a child component textbox from Parent component in Angular.

Parent Component HTML:

<button (click)="setFocusOnChildComponentTextBox()">Button</button>
<child-component></child-component>

Child Component HTML:

<input type="text" id="txt" name="txt"></input>

Parent Component TS:

setFocusOnChildComponentTextBox() {
// write code to set focus on child-component "txt" textbox
}

The above is just a sample code I am trying to achieve.

Normally in Angular we can pass input properties to child component and have output methods. In this case, I need to call a method of child component from the parent component.

Does this answer your question? how to focus on an input in Angular — R. Richards
– R. Richards, Commented Apr 22, 2021 at 17:31
Thanks Richard. It partially answers the question but I want to know how to access the child component from parent component. — developer
– developer, Commented Apr 23, 2021 at 9:21

Aakash Garg · Accepted Answer · 2021-04-22 17:24:58Z

6

In child component lets say you have input

<input type="text" #myInput></input>

In child component typescript have

@ViewChild('myInput', {read:ElementRef}) myInput: ElementRef<HTMLInputElement>;

In parent component typescript have

@ViewChild(ChildComponent) comp: ChildComponent;

to focus use

this.comp.myInput.nativeElement.focus();

edited Apr 22, 2021 at 17:24

answered Apr 22, 2021 at 17:16

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T Esh Over a year ago

I have a similar situation but I am using the <child-component> twice in my template and am getting the error "Found 2 elements with non-unique id ". any suggestions on how to resolve?

Aakash Garg Over a year ago

use viewchildren to get both inputs in array, if want them separately, give a different name like #myInputTwo

Collectives™ on Stack Overflow

Set focus on Child component textbox from Parent component in Angular [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related