Ionic2/Angular2/TypeScript: How to access a DOM element in a function 2016

Question

I can't seem to find the 'correct' way to access a DOM element in an up-to-date way for:
Angular2 + Ionic2 + TypeScript.

So given this scenario below...

Q) How do i get access to sketchElement in the sign() function?

Settings.ts template:

<button full class="top-button-margin" (click)="sign()">
  Sign
  <ion-icon name="create"></ion-icon>
</button>
<img id="sketchElement" src="img/logo.png" padding *ngIf="showSignatureView">

My settings.ts class:

@Page({
  templateUrl: 'build/pages/settings/settings.html'
})
export class SettingsPage {

  private currentUser: User = <User>{};
  private loggingOut: boolean = false;
  private currentConnection: string = "";
  private showSignatureView: boolean = false;

  constructor(
    private _platform: Platform,
    private _nav: NavController,
    private _events: Events,
    private _LoginService: LoginService,
    private _SessionService: SessionService,
    private _UIService: UIService) {

  }

  sign() {
    // I want to access sketchElement and its properties here.      
  }
}

Answer 1

You can use the ViewChild decorator. First add :

<img id="sketchElement"
     #sketchElement
     src="img/logo.png" padding *ngIf="showSignatureView">

and in your component, add the corresponding property:

@Page({
  templateUrl: 'build/pages/settings/settings.html'
})
export class SettingsPage {
  @ViewChild('sketchElement')
  sketchElement:ElementRef;

  ngAfterViewInit() {
    // sketchElement is usable
  }
}

See this plunkr: http://plnkr.co/edit/0TV3ppA0Gpwr5CjOWlAu?p=preview.

This question could also help you:

• Calling a function in a child Angular2 Component?