title: Ionic2/Angular2/TypeScript: How to access a DOM element in a function 2016
body: <p>I can't seem to find the 'correct' way to access a DOM element in an up-to-date way for:<br>
   <code>Angular2 + Ionic2 + TypeScript.</code> </p>
  
  <p>So given this scenario below...  </p>
  
  <p><strong>Q) How do i get access to <code>sketchElement</code> in the sign() function?</strong>  </p>
  
  <p><em>Settings.ts template:</em></p>
  
  <pre><code>&lt;button full class="top-button-margin" (click)="sign()"&gt;
    Sign
    &lt;ion-icon name="create"&gt;&lt;/ion-icon&gt;
  &lt;/button&gt;
  &lt;img id="sketchElement" src="img/logo.png" padding *ngIf="showSignatureView"&gt;
  </code></pre>
  
  <p><em>My settings.ts class:</em></p>
  
  <pre><code>@Page({
    templateUrl: 'build/pages/settings/settings.html'
  })
  export class SettingsPage {
  
    private currentUser: User = &lt;User&gt;{};
    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.      
    }
  }
  </code></pre>