CODEWITHSUNDEEP
javascriptangulartypescriptfocus
None
None

Reputation: 9247

How to add autofocus on first input element in loop?

So im doing loop and display inputs and i want on click on select to add focus on first input element. Any suggestion how can i select that first element and add him autofoccus?

Upvotes: 1

Views: 1218

Answers (1)

Vega
Vega

Reputation: 28701

Here is how to do. Write a directive :

import {Directive, Renderer, ElementRef, OnInit, AfterViewInit, Input} from '@angular/core';

@Directive({
  moduleId: module.id,
  selector: '[focusOnInit]'
})
export class FocusOnInitDirective implements OnInit, AfterViewInit {
  @Input() focusOnInit ;

  static instances: FocusOnInitDirective[] = [];

  constructor(public renderer: Renderer, public elementRef: ElementRef) {
  }

  ngOnInit(): void {
    FocusOnInitDirective.instances.push(this)
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      FocusOnInitDirective.instances.splice(FocusOnInitDirective.instances.indexOf(this), 1);
    });

    if (FocusOnInitDirective.instances.every((i) =>  i.focusOnInit===0)) {
      this.renderer.invokeElementMethod(
        this.elementRef.nativeElement, 'focus', []);
    }
  }
}

in your component:

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
    <div *ngFor="let input of [1,2,3,4]; let i=index">
      <input  type="text" [focusOnInit] = i >
    </div>
  `
})
export class AppComponent {

}

The corresponding plunker, adapted from this

Upvotes: 3

Related Questions