Question

181

TypeError: ctx.onCreditChange is not a function angular

rated 0 times [ 187] [ 6] / answers: 1 / hits: 22581 / 4 Years ago, thu, september 24, 2020, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brooksb

Add To Favorites

Follow

Total Points: 480

Total Questions: 98

Total Answers: 106

Location: Somalia

Member since Mon, Feb 27, 2023

1 Year ago

answered 4 Years ago kieraelsies · Accepted Answer

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)

  }

}