template variables in Angular 4

If you consider what I started here and then refactored here. You could get the same effect with a template like so:

<div>
   <input #convenience (keydown)="hollowHelp()" />
   <div>{{veni.nativeElement.value}}</div>
   <button (click)=resetIt()>reset</button>
</div>

 
 

For a component like so:

import { Component, ElementRef, ViewChild, Renderer, AfterViewInit } from
      '@angular/core';
@Component({
   selector: 'foo-bar',
   templateUrl: 'bazqux.component.html'
})
export class AppComponent {
   @ViewChild('convenience') veni: ElementRef;
   public resetIt():void {
      this.veni.nativeElement.value = "meh";
   }
   hollowHelp():void{ }
   constructor(private renderer: Renderer) {}
   ngAfterViewInit() {
      this.renderer.invokeElementMethod(this.veni.nativeElement, 'focus');
   }
}