Angular2 - TypeScript Increment a number after timeout in AppComponent

Question

I want to create a simple Angular2 Application using TypeScript  Seems  pretty simple  but I am not able to achieve what I wanted to   I want to show a property value in the template  And I want to update the same after 1 second using setTimeout   Plunkr Code is here   Code on Plunkr  What I wrote is here    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           When I use this code I am getting following error     Uncaught SyntaxError  Unexpected token     Why I am not able to access n  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   I even tried   export class AppComponent     public n   number   1    console log n       But I am not able to see the value of n in the console   When I tried  export class AppComponent     public n   number   1    console log this       I am getting same error as above  Why cant we access this in this place  I guess  this refers to the current context as in JavaScript   Thanks in advance

User · Answer

You should put your processing into the class constructor or an OnInit hook method

User · Answer

This is not valid TypeScript code  You can not have method invocations in the body of a class      INVALID CODE export class AppComponent     public n  number   1    setTimeout function         n   n   10       1000         Instead move the setTimeout call to the constructor of the class  Additionally  use the arrow function   gt  to gain access to this   export class AppComponent     public n  number   1     constructor         setTimeout      gt          this n   this n   10         1000              In TypeScript  you can only refer to class properties or methods via this  That s why the arrow function   gt  is important

[typescript] Angular2 - TypeScript : Increment a number after timeout in AppComponent

Examples related to typescript

Examples related to angular