Observable in angular 2, data is not logging to the console

The following code is not logging the data to the console windows nor it's throwing any exceptions and Transpiler is also not showing any errors, I'm working on angular 2.0.0-beta.7 I've been looking to resolve this issue since 4 hours but couldn't figure out the solution.

app.component.ts is below

import {Component} from "angular2/core";
import {Observable} from "rxjs/Rx";


@Component({
selector: 'my-app',
template: ` 
          <input id="search" type="text" class="form-control">
          `

})

export class AppComponent {
   constructor() {
      var keyups = Observable.fromEvent($("#search"), "keyup");

       keyups.subscribe(data => console.log(data));
     }
}

index.html

<html>
  <head>
     <title>Angular 2 QuickStart</title>
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="app/styles.css">
  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"> </script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/boot')
            .then(null, console.error.bind(console));
</script>
</head>

<!-- 3. Display the application -->
    <body>
     <my-app>
       Loading...
     </my-app>

    </body>
  </html>

tsconfig.json

{
  "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
},
 "exclude": [
 "node_modules",
 "typings/main",
 "typings/main.d.ts"
  ]
}

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
   "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install"
  },
   "license": "ISC",
   "dependencies": {
   "angular2": "2.0.0-beta.7",
   "bootstrap": "^3.3.6",
   "es6-promise": "^3.0.2",
   "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "systemjs": "0.19.22",
  "zone.js": "0.5.15"
 },
  "devDependencies": {
   "concurrently": "^2.0.0",
   "lite-server": "^2.1.0",
  "typescript": "^1.7.5"
  }
}

Solution

You could do use your code within the ngAfterViewInit method of your component instead of its constructor.

See this link for more details: https://angular.io/docs/ts/latest/api/core/AfterViewInit-interface.html.

You could also leverage the ViewChild decorator as described below:

import {Component, ViewChild} from "angular2/core";
import {Observable} from "rxjs/Rx";


@Component({
selector: 'my-app',
template: ` 
          <input #search type="text" class="form-control">
          `
})
export class AppComponent {
   @ViewChild('search')
   search:ElementRef;

   ngAfterViewInit() {
      var keyups = Observable.fromEvent(this.search.nativeElement, "keyup");

       keyups.subscribe(data => console.log(data));
     }
}