On click set focus on textarea angular 5

Question

<div class="posts">    
   <div class="post">
      <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>

    <div class="post">
       <div>post content</div>
    <a class="comment">Comment</a>

    <textarea [(ngModel)]= "model.text" class="comment-text" name="text"></textarea>
    </div>
</div>
...

I want to set focus on textarea on 'a' click. Can anyone please help me. I'm using angular 5

just use a querySelector or ViewChild and call .focus() on the resulting element. — chrispy, Apr 03 '18 at 16:08
Use `ViewChildren` and `QueryList` to achieve this. Check my answer — Madhavan.V, Apr 03 '18 at 18:21

Vega · Answer 1 · 2018-04-04T07:47:38.930

11

You can set focus directly from your markup in HTML file if you use template variables. You can reference it in (click) method. This way, no need to access DOM thru the code, it stays in HTML file, easier for debugging:

HTML

...
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
<button (click)="textarea1.focus()">SetFocus on the first textarea</button>
...
<textarea #textarea2 [(ngModel)]="text" class="comment-text" name="text"></textarea>
<button (click)="textarea2.focus()">SetFocus on the second textarea</button>
...

DEMO

edited Apr 04 '18 at 07:47

answered Apr 03 '18 at 18:29

Vega

27,856
27
95
103

1

Thanks Vega, his was my case. And I like the idea of keeping it in HTML. Best! – Razvan Dec 02 '19 at 12:33

Madhavan.V · Accepted Answer · 2018-04-04T04:17:55.463

Here you may go for loop the <div class="post">,

<div class="posts">    
  <div class="post">
    <div>post content</div>
    // Pass index here, if you want to achieve dynamically
    <a class="comment" (click)="doSomething(0)">Comment</a>
    <textarea [(ngModel)]= "model.text" class="comment-text" #txtArea name="text"> 
    </textarea>
  </div>   
  <div class="post">
    <div>post content</div>
    <a class="comment" (click)="doSomething(1)">Comment</a>
    <textarea [(ngModel)]= "model.text" class="comment-text" #txtArea name="text"> 
    </textarea>
  </div>
</div>

Now in your ts file add the following imports,

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

Read elements using ViewChildren and QueryList like this,

@ViewChildren("txtArea") textAreas:QueryList<ElementRef>;

Finally your doSomething event handler like this,

doSomething(index: number) {
  this.textAreas.find((item, idx) => {
    return idx === index;
  }).nativeElement.focus();
}

Update

The above code will work with an array of posts. So we don't need to hard-code the id like #txtArea1, #txtArea2 etc. Please check here the DEMO_1

If you are iterating <div class="post"> like,

<div class="post" *ngFor="let post of posts; index as i">

You can pass the index(here i) to get corresponding TextArea reference from QueryList like below,

<a class="comment" (click)="textAreas.toArray()[i].nativeElement.focus()">Comment</a>

Check the complete code here DEMO_2

Zzz · Answer 3 · 2018-04-03T22:40:44.303

You can use the @ViewChild decorator. Documentation: https://angular.io/api/core/ViewChild.

You need to assign a name to your input element and wire up a click event.

<textarea #inputToFocus />
 <a (click)="focusInput()">Click</button>

In your component, use @ViewChild to search for the element, then implement the click handler to perform whatyou need.

export class App implements AfterViewInit {
  @ViewChild("inputToFocus") inputElement: ElementRef;

  focusInput() {
    this.inputElement.nativeElement.focus()
  }

NOTE:The inputElement variable will be first available, when ngAfterViewInit event fires.

UPDATE DUE TO UPDATED QUESTION: To handle multiple elements you would need to use @ViewChildren Documentation: https://angular.io/api/core/ViewChildren

In the code example you gave above I would make the redundant code into its own component to encapsulate the repeated functionality.

Thanks. If I have multiple textarea and 'a' then how can I achive this. — Anoop, Apr 03 '18 at 16:31

On click set focus on textarea angular 5

3 Answers3