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

Question

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"
  }
}

Thierry Templier · Accepted Answer · 2016-04-02T11:03:56.100

0

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));
     }
}

edited Apr 02 '16 at 11:03

answered Apr 02 '16 at 10:50

Thierry Templier

198,364
44
396
360

Brilliant, can you please tell me why my code didn't work? :) – aven parker Apr 02 '16 at 11:14
You're welcome! You try to reference a DOM element before it was created (in the constructor). You need to wait for this leveraging component lifecycle hooks (the `ngAfterViewInit` one in your case). The component constructor isn't linked to this lifecycle and is called even before the component is compiled and the associated DOM created. – Thierry Templier Apr 02 '16 at 20:49

score 0 · Answer 2 · answered Sep 02 '16 at 04:24

0

Thierry's answer worked for me but shouldn't ElementRef also be imported?

import {Component, ViewChild, ElementRef} from 'angular2/core';

answered Sep 02 '16 at 04:24

Matthew Horne

1
1
3

score 0 · Answer 3 · edited Jan 03 '17 at 17:45

I am sorry to tell you that the same code works with "rxjs": "5.0.0-beta.0"

package.json

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

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

3 Answers3