current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite
2

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.      
  }
}
share|improve this question
up vote 9 down vote accepted

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:

share|improve this answer
    
Ok, I've done that, but I'm getting null returned when i do: console.log(sketchElement); – Dave Mar 8 '16 at 14:47
    
I added a plunkr in my answer. When do you call the console.log. You need to wait for the ngAfterViewInit hook... – Thierry Templier Mar 8 '16 at 14:52
    
Got it. my show/hide *ngIf was conflicting, hence removing from the dom. Thanks. – Dave Mar 8 '16 at 14:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.