Focus in angular formArray (after adding a new row)

The Template logic Looks like this:  

<div formArrayName="inputs" class="col-md-6 col-12" 

     *ngFor="let inputCtrl of form.get('phones').controls; 
             let i=index; trackBy:trackByFn">
     <div [formGroupName]="i">
        <input #input type="text" class="phone" 
             (blur)="addRecord()"
             formControlName="input" />
     </div>
 </div>

import { AfterViewInit, QueryList, ViewChildren, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';

 // .. other imports

 export class MyComp implements AfterViewInit, OnDestroy {
   @ViewChildren('input') rows: QueryList<any>;
   private sub1:Subscription = new Subscription();
   //other variables ..

 // changes to rows only happen after this lifecycle event so you need
 // to subscribe to the changes made in rows.  
 // This subscription is to avoid memory leaks
 ngAfterViewInit() {
   this.sub1 = this.rows.changes.subscribe(resp => {
     if (this.rows.length > 1){
       this.rows.last.nativeElement.focus();
     }
   });
  }

  //memory leak avoidance
  ngOnDestroy(){
    this.sub1.unsubscribe();
  }


   //add a new input to the page
   addInput() {
     const formArray = this.form.get('inputs') as FormArray;

     formArray.push(
        new FormGroup(
        {input: new FormControl(null, [Validators.required])}
     ));
    return true;
   }

 // need for dynamic adds of elements to re 
 //focus may not be needed by others
 trackByFn(index:any, item:any){
    return index;
 }

Focus() for Angular form control

 <form class="form-horizontal fonts" autocomplete="off" action="" ngSubmit)="onSubmit()">

<div class="form-group">

<label class="control-label" for="prmCorrSelect">Correlation</label>

<select id="prmCorrSelect" #drop class="form-control input-types fonts" name="prmCorrSelect">

   <option *ngFor="let data of correlationList" [value]="data.Id">{{data.Correlation}} 

   </option>

</select>

</form>

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

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  @ViewChild("name") nameField: ElementRef;

  editName() {

    this.nameField.nativeElement.focus();

  }

}

Jump to any position inside the div

 You could do it like this:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

and then in your component:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

or

<div id="editContent">
gfjsdgfjs<br/>
zvncvznbv
</div>
In component side
var elmnt = document.getElementById("editContent");
      elmnt.scrollIntoView();