Angular2 click event not firing

Question

I'm trying to implement custom pagination component. This is template.

<div *ngIf="totalItems != 0">
    <ul class="pagination">
        <li *ngFor="let page of pages" [ngClass]="{'active': currentPage == page.title}">
            <a (click)="changePage(page)">{{page.title}}</a>
        </li>
    </ul>
    <select>
        <option *ngFor="let size of pageSizes">{{size}}</option>
    </select>
</div>

Component code:

@Component({
    selector: 'pager',
    templateUrl: 'templates/pager.component.html',
    styleUrls: ['styles/pager.component.css']
})
export class PagerComponent {
    @Input() totalItems: number = 0;
    @Input() lastText: string = "»";
    @Input() firstText: string = "«";
    @Input() nextText: string = "›";
    @Input() prevText: string = "‹";
    public currentPage: number = 1;
    pageSizes: Array<number> = [10, 15, 30];
    public currentSize: number = this.pageSizes[0];

    @Output() pageChanged = new EventEmitter();

    get pages(): Array<IPage> {
        var list = new Array<IPage>();
        let pageCount = Math.ceil(this.totalItems / this.currentSize);
        let start = Math.max(this.currentPage - 1, 1);
        let end = Math.min(this.currentPage + 2, pageCount);
        list.push({ title: this.firstText, number: 1 });
        list.push({ title: this.prevText, number: this.currentPage - 1});
        for (let i = start; i <= end; i++) {
            list.push({ title: String(i), number: i });
        }
        list.push({ title: this.nextText, number: this.currentPage + 1});
        list.push({ title: this.lastText, number: end});
        return list;
    }

    public changePage(page: IPage) {
        this.currentPage = page.number;
        this.pageChanged.emit(null);
    };

    public resetCurrentPage(): void {
        this.currentPage = 1;
    }
}

I was using simple array of numbers. Then I wanted to add Last/Firts buttons. I wrote interface that contains two properties title and page number. Now click event doesn't work. What's wrong with my code?

@galvan there's no any error. @Günter Zöchbauer it ins't firing. I've tried to create custom <div> and bind the same function on click It works good with div — Sergеу Isupov
– Sergеу Isupov, Commented Sep 27, 2016 at 9:24

manu · Accepted Answer · 2016-09-27 09:37:54Z

2

I think the problem is function changePage() has an argument of type IPage and you pass a number

 public changePage(page: IPage) {
    this.currentPage = page.number;
    this.pageChanged.emit(null);
};

change it to

 public changePage(num: number) {
    this.currentPage = num;
    this.pageChanged.emit(null);
};

answered Sep 27, 2016 at 9:37

manu

1155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergеу Isupov Over a year ago

I'm sorry, I forgot to change the template. And it doesn't work this way as well.

Community · Accepted Answer · 2017-05-23 10:30:59Z

1

I've fixed it! It's similar to this question. It generated new array each time. So angular can't bind an event to array item. @Günter Zöchbauer, it should be familiar to you.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Sep 27, 2016 at 12:18

Sergеу Isupov

5041 gold badge8 silver badges20 bronze badges

2 Comments

Ashish Gupta Over a year ago

I'm having the same problem. Would be great if you could tell how did you solved it?

Sergеу Isupov Over a year ago

I can't remember details of implementation, just try to save an array in your class field and return it in a property. Please, see the link in my answer.

Collectives™ on Stack Overflow

Angular2 click event not firing

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related