TypeError: ctx.onCreditChange is not a function angular

I have two components. Component A which is the parent and component 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 component 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 component)

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?

Continue reading...