title: Angular2 - TypeScript : Increment a number after timeout in AppComponent
body: <p>I want to create a simple <code>Angular2</code> Application using <code>TypeScript</code>. Seems, pretty simple, but I am not able to achieve what I wanted to.</p>
  
  <p>I want to show a property value in the template. And I want to update the same after 1 second using setTimeout.</p>
  
  <p>Plunkr Code is here : <a href="http://plnkr.co/edit/RhYhVS84wnOdPuhYUG1E?p=preview">Code on Plunkr</a></p>
  
  <p>What I wrote is here :</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  interface Hero {
    id: number;
    name: string;
  }
  
  @Component({
    selector: 'my-app',
    template:`&lt;h1&gt;Number Increment&lt;/h1&gt;&lt;p&gt;{{n}}&lt;/p&gt;`
  })
  export class AppComponent {
    public n : number = 1;
    setTimeout(function() {
      n = n + 10;
    }, 1000);
  }    
  </code></pre>
  
  <p>When I use this code I am getting following error : </p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token ;
  </code></pre>
  
  <p>Why I am not able to access <code>n</code>, which is in the same scope as we used to do in JavaScript. If I am not wrong, we can use pure JavaScript too in TypeScript.</p>
  
  <p>I even tried </p>
  
  <pre><code>export class AppComponent {
    public n : number = 1;
    console.log(n);
  }
  </code></pre>
  
  <p>But I am not able to see the value of <code>n</code> in the console.</p>
  
  <p>When I tried</p>
  
  <pre><code>export class AppComponent {
    public n : number = 1;
    console.log(this);
  }
  </code></pre>
  
  <p>I am getting same error as above. Why cant we access this in this place. I guess, <code>this</code> refers to the current context as in JavaScript.</p>
  
  <p>Thanks in advance.</p>