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/ponent.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 piled then give a "is not a function" error

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/ponent.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 piled then give a "is not a function" error

• javascript
• angular

• Could you publish changedItem method? – Jaroslaw K. Commented Mar 22, 2017 at 13:07
• only changedItem method doesn't work and all my codes above without app.ts file – muratoner Commented Mar 22, 2017 at 13:09

2 Answers 2

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 ?

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