Angular 2 click event doesn't work

Question

My have a web project and using angular 2 my different pages used click event don't have any problem but new page created then click event give a error in new page.

This Error

TypeError: self.parentView.parentView.context.changedItem is not a function at View_SiteConfig3.handleEvent_0 (/AppModule/SiteConfig/component.ngfactory.js:137) at View_SiteConfig3.eval (core.umd.js:12399) at HTMLTextAreaElement.eval (platform-browser.umd.js:3223) at ZoneDelegate.invokeTask (zone.js:265) at Object.onInvokeTask (core.umd.js:3971) at ZoneDelegate.invokeTask (zone.js:264) at Zone.runTask (zone.js:154) at HTMLTextAreaElement.ZoneTask.invoke (zone.js:335)

site-config.html

<div *ngFor="let item of items1; let i = index;" class="col-sm-4">
    <button (click)="changedItem(item)">Test</button>
</div>

site-config.ts

import { Component, OnInit } from '@angular/core'
import { Http } from '@angular/http'

@Component({
    selector: 'site-config',
    moduleId: module.id,
    templateUrl: '/site-config.html'
})
export class SiteConfig implements OnInit {

    items1: number[] = [1,2,3]

    ngOnInit(): void {
    }

    public changedItem(item) {
        //My Codes This Here
    }

    constructor(private http: Http) {
    }
}

EDIT: Solved problem this method;

My project worked. Problem is ts file not compiled then give a "is not a function" error

only changedItem method doesn't work and all my codes above without app.ts file — muratoner
– muratoner, Commented Mar 22, 2017 at 13:09

Massimiliano Kraus · Accepted Answer · 2018-10-07 17:30:23Z

3

Maybe it's an error from a piece of code you don't provide.

I reproduce your code :

The view:

<pre *ngIf="current">{{current}}</pre>
<div *ngFor="let item of items1; let i = index;" class="col-sm-4">
  <button (click)="changedItem(item)">Test</button>
</div>

The class content:

items1: number[] = [1,2,3]

current: number;

ngOnInit() {
}

public changedItem(item) {
    this.current = item;
}

constructor() {
}

Here's a working Plunkr : https://plnkr.co/edit/ZGI1FNB8RWN9BnnPnKgJ?p=preview

Can you provide more code ?

edited Oct 7, 2018 at 17:30

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Mar 22, 2017 at 13:13

Maxime

2,2641 gold badge23 silver badges41 bronze badges

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

1 Comment

muratoner Over a year ago

My project worked. Problem is ts file not compiled then give a "is not a function" error. thanks for helps

Jaroslaw K. · Accepted Answer · 2017-03-22 13:16:15Z

0

Try this:

site-config.html

<div *ngFor="let item of items1; let i = index;" class="col-sm-4">
    <button type="button" (click)="changedItem($event, item)">Test</button> <!-- add type="button" -->
</div>

site-config.ts

import { Component, OnInit } from '@angular/core'
import { Http } from '@angular/http'

@Component({
    selector: 'site-config',
    moduleId: module.id,
    templateUrl: '/site-config.html'
})
export class SiteConfig implements OnInit {

    items1: number[] = [1,2,3]

    ngOnInit(): void {
    }

    public changedItem(event: any, item: number) {
        event.preventDefault();
        //Your code...
    }

    constructor(private http: Http) {
    }
}

edited Mar 22, 2017 at 13:16

answered Mar 22, 2017 at 13:09

Jaroslaw K.

5,4142 gold badges42 silver badges66 bronze badges

1 Comment

Evan Carroll Over a year ago

angular/http is deprecated angular.io/guide/deprecations#http

Collectives™ on Stack Overflow

Angular 2 click event doesn't work

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related