I have two ponents. Component A which is the parent and ponent B which is the child. Component A looks like this:

A.html

    <nb-box [onCreditChange]="onCreditChange"></nb-box>

A.ts

onCreditChange($event) { console.log($event) }

The function from ponent A is transferred to B.

Component B looks like this

B.html

<div class="box">
 <nb-switch  (onChange)="onCreditChange($event)"></nb-switch>

</div>

B.ts (part of this ponent)

import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';

export class Box extends BoxBase {
  @Output() onCreditChange: EventEmitter<any> = new EventEmitter()

}

I get an error when calling the function

core.js:6241 ERROR TypeError: ctx.onChange is not a function

Do you know how to fix it?

I have two ponents. Component A which is the parent and ponent B which is the child. Component A looks like this:

A.html

    <nb-box [onCreditChange]="onCreditChange"></nb-box>

A.ts

onCreditChange($event) { console.log($event) }

The function from ponent A is transferred to B.

Component B looks like this

B.html

<div class="box">
 <nb-switch  (onChange)="onCreditChange($event)"></nb-switch>

</div>

B.ts (part of this ponent)

import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';

export class Box extends BoxBase {
  @Output() onCreditChange: EventEmitter<any> = new EventEmitter()

}

I get an error when calling the function

core.js:6241 ERROR TypeError: ctx.onChange is not a function

Do you know how to fix it?

• javascript
• angular

• Shouldn’t this: [onCreditChange]="onCreditChange" be this: (onCreditChange)="onCreditChange" ? – MikeOne Commented Sep 24, 2020 at 19:50
• @MikeOne I changed but I get new erroe : This expression is not callable. Type 'EventEmitter<any>' has no call signatures. – Doe Commented Sep 24, 2020 at 19:55

2 Answers 2

PARENT COMPONENT

HTML

<nb-box (onCreditChange)="onCreditChange"></nb-box>

TS

onCreditChange($event) { console.log($event) }

CHILD COMPONENT

The error start here, because Output is not a function, it's an object that allow to you to send events to the parent. You need to do a function in child an inside of that function emit with the output object.

HTML

<div class="box">
 <nb-switch  (onChange)="onChangeInChild($event)"></nb-switch>

</div>

TS

import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';

export class Box extends BoxBase {
  @Output() onCreditChange = new EventEmitter<any>()

  onChangeInChild(eventObject: any){
      this.onCreditChange.emit(eventObject)
  }
}

This error happend to me beacuse the function call in the template was misspelled.