input focus in angular through renderer

dom-input-focus-in-angular-through-renderer2.ts

import { Component, AfterContentInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'custom-form',
  template: `
    <form>
      <input
        placeholder="Name"
        id="name-input"
      />
    </form>
  `
})
export class FormComponent implements AfterContentInit {  
  constructor(private renderer: Renderer2) {}

  // Change state before angular change detection complete
  ngAfterContentInit() {
    this.renderer.selectRootElement('#name-input').focus();
  }
}