Access template reference variables from component class
That is a use-case for @ViewChild
:
https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html
class XComponent { @ViewChild('ipt', { static: true }) input: ElementRef; ngAfterViewInit() { // this.input is NOW valid !! } somefunction() { this.input.nativeElement...... }}
Here's a working demo:
https://stackblitz.com/edit/angular-viewchilddemo?file=src%2Fapp%2Fapp.component.ts