It is not recommended to access dom directly in Angular. Angular provides Renderer (Angular2) and Renderer 2(Angular4) abstractions.

Here is how to do in Angular 2:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input #inp id="myInput" type="text">
      <button (click)="setFocus()">Set Focus</button>
    </div>
  `,
})
export class App {
  @ViewChild('inp') inp:ElementRef;

  constructor(private renderer: Renderer) {
  }

  setFocus() {
    this.renderer.invokeElementMethod(this.inp.nativeElement, 'focus');
  }
}

In Angular4 Renderer is depricated and Renderer2 is added. invokeElementMethod got removed and there is a discussion about it: https://github.com/angular/angular/issues/13818#issuecomment-297815331

Here is Angular 4 way:

 let onElement = this.renderer2.selectRootElement('#myInput');
 onElement.focus();

You can use a template reference variable in the first input, that will give you the ability to run .focus() on it.

In your template you can add #fieldName1 to your input tag (i.e. <input type="text" #fieldName1>)

in your controller do:

@ViewChild('fieldName1')
fieldName1: any;

now you can do this.fieldName1.nativeElement.focus() in the controller or fieldName1.focus() in the template.

Adding renderer way using @ViewChild decorator. You can skip using #id attribute as mentioned by @julia above.

It will focus input element once the view is initialized Html:

<textarea  #tasknote name="tasknote"> </textarea> 

JS:

export class MyComponent implements AfterViewInit {
      @ViewChild('tasknote') input: ElementRef;
         constructor(private renderer: Renderer2){           
          }

       ngAfterViewInit() {
       //using selectRootElement instead of deprecated invokeElementMethod
       this.renderer.selectRootElement(this.input["nativeElement"]).focus();
      }

    }

to know more about other functions of renderer follow official docs