CODEWITHSUNDEEP
angularangular2-directives
S M
S M

Reputation: 3233

angular2 event not firing

I am using angular2, I have a dropdown list and I have a function to be called on the (change) event. But this event is not firing. The below is my code

    import {Component, EventEmitter, OnInit} from 'angular2/core';
    import {perPageCount} from './interface';
    import {CORE_DIRECTIVES} from 'angular2/common';
    @Component({
    selector: 'table-content',
    template: 
     `<div class="dropdown-wrap ">
          <select name="" tabindex="1" (change)="onSelect($event.target.value)">
                  <option *ngFor="#perPageCount of perPageCounts; #i=index" value="{{perPageCount.value}}" [attr.selected]="i == 0 ? true : null" > 
                                    {{perPageCount.text}} 
                  </option>
          </select>
     </div>`,
    providers: [CORE_DIRECTIVES]
})
export class tablecontent {
    public perPageCounts: perPageCount[] = [
        { text: 10, value: 1 },
        { text: 25, value: 2 },
        { text: 50, value: 3 },
        { text: 100, value: 4 }
    ];
    public ipp: number = this.perPageCounts[0].text;

    onSelect(value) {
        this.ipp = null;
        for (var i = 0; i < this.perPageCounts.length; i++) {
            if (this.perPageCounts[i].value == value) {
                this.ipp = this.perPageCounts[i].text;
                console.log(this.ipp)
        }
    }
}

The dropdownlist is loading but onSelect(value) function is not firing! Please somebody help!!

Upvotes: 1

Views: 1276

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202196

I updated a bit your code since I have TypeScript error but it works on my side. The onSelect method is called:

import {Component, EventEmitter, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';

class perPageCount {
  constructor(public text: number, public value: number) { }
}

@Component({
  selector: 'first-app',
  template:
    `<div class="dropdown-wrap ">
      <select name="" tabindex="1" (change)="onSelect($event.target.value)">
        <option *ngFor="#perPageCount of perPageCounts; #i=index" value="{{perPageCount.value}}" [attr.selected]="i == 0 ? true : null" > 
          {{perPageCount.text}} 
        </option>
      </select>
    </div>`
  })
export class AppComponent {
  public perPageCounts: perPageCount[] = [
    new perPageCount(10, 1),
    new perPageCount(25, 2),
    new perPageCount(50, 3),
    new perPageCount(100, 4)
  ];
  public ipp: number = this.perPageCounts[0].text;

  onSelect(value) {
    this.ipp = null;
    for (var i = 0; i < this.perPageCounts.length; i++) {
      if (this.perPageCounts[i].value == value) {
        this.ipp = this.perPageCounts[i].text;
        console.log(this.ipp)
      }
    }
  }
}

I tested your code like this as well and I have the same behavior (the onSelect method is called)...

Perhaps you forget to include the Rx.js file into your HTML page:

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

Upvotes: 2

Related Questions