When the Input is clicked, autofocus works only on the first instance - therefore the 'list-formatter' (autocompleListFormatter) is initiated only once.

Is there a simple solution to make 'autofocus' focus more than one time?

dropdown.component.html

<form [formGroup]="myForm" class="">
  <div class="form-style">
    <input
      autofocus
      [list-formatter]="autocompleListFormatter"
      type="text"
      class="form-control"
      ngui-auto-complete
      formControlName="costCenter"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      [(ngModel)]="value"
    />
  </div>
</form>

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;

  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public selected;
  value: any;
  oldValue: any;
  params: any;
  public container;
  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

// ****DROPDOWN****** //
  autocompleListFormatter = (data: any) => {
    let html = `<span>${data.name}</span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };

  refresh(params: ICellEditorParams) {
    this.params.api.refreshCells();
    return true;
  }

  getValue(): any {
    if (this.value === '') {
      this.value = this.oldValue;
    }
    return this.value;
  }

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }

  ngOnInit() {
    this.myForm = this.builder.group({
      costCenter: ''
    });
  }
}

STACKBLITZ

Update: I have read that it is useful to implement an auto-focus directive. I have added the directive to my code but cannot get it to function correctly

I see many posts in how to set autofocus on an input filed in angularjs by creating a directive or HTML autofocus, Is there a quick and easy way to set focus in angular (angular 2, angular 4 etc)

Similar to Google Login page, I want to have autofocus on input element after on click event. I have tried @ViewChild('id') and document.getElementId('id'). Both of it doesn't work. It's always null or undefined. How can I achieve this?

       <mat-form-field class="example-full-width col-sm-4">
        <input autofocus id="login-username" matInput 
       formControlName="userName" minlength="5" maxlength="20" 
       name="userName" placeholder="Username" required #input> 
      </mat-form-field>

        <div class="col-sm-12">
           <button (click)="changeView()" type="button" mat-raised-
             button color="primary">Next</button>
          </div>

         <mat-form-field class="example-full-width col-sm-4" 
          #passwordInput>
        <input autofocus type="password" matInput 
       placeholder="Password" minlength="5" maxlength="20" 
       formControlName="userPassword" #passwordInput>  
      </mat-form-field>

I am working with and angular JS and HTML5 application. I have a login form with username and password field. when the login page loads i want the focus to be on the username by default.i have used HTML5 autofocus="autofocus" to implement this without writing any script.

 <input name="USER" id="USER" type="email" class="input-control" data-ng-model="login.userName" required autofocus="autofocus">

This works fine in Google Chrome, Internet Explorer and Safari. however the autofocus is not working in Mozilla Firefox.i have red about some issues with autofocus in firefox for old versions. i am using version 48.0

Any solutions? Thanks in advance

<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>