Cannot read property 'onchange' of undefined error when calling function

Question

I have popular error about Angular 2. When I'm calling function from another component I face this error.

"Cannot read property 'onChange' of undefined at CD019.onChangeParent"

My codes below:

  @ViewChild('testComponent') testComponent: CD020;

onChangeParent() {
    this.testComponent.onChange;

}

and child component is

   @Output() childChanged = new EventEmitter<string>();
    onChange(value: string, test: string) {
        this.childChanged.emit(value);
        this.Test(test);
    }

Thanks for your help already.

What error(s) do you get? Can you post them in your question? Also, if you are calling a function on your child, you must add parentheses at the end of a function call. this.testComponent.onChange() //added () — John
– John, Commented Jun 1, 2017 at 6:36
The error is "Cannot read property 'onChange' of undefined at CD019.onChangeParent". I tried with () and parameters but it doesn't change. — Canberk Dogmus
– Canberk Dogmus, Commented Jun 1, 2017 at 6:38
Can you also post your html for the parent? And what type is your child component? Is it CD020? — John
– John, Commented Jun 1, 2017 at 6:52
Yes, its type is CD020. I posted it, i'm using child component with selector in parent html. but i want to trigger child's function when i'm using parent's method. — Canberk Dogmus
– Canberk Dogmus, Commented Jun 1, 2017 at 6:59

Hampus · Accepted Answer · 2017-06-01 07:00:01Z

1

According to the documentation you shall use the component type as the identifier for the ViewChild decorator. https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

@ViewChild(CD020) testComponent: CD020;

answered Jun 1, 2017 at 7:00

Hampus

2,8391 gold badge27 silver badges40 bronze badges

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

1 Comment

eko Over a year ago

@canberkdogmus if the answer solved your issue. You should mark it as accepted: meta.stackexchange.com/a/135826

John · Accepted Answer · 2017-06-01 07:10:34Z

0

You need to make sure @ViewChild(ChildType) testComponent: ChildType uses the same type E.g.your child component:

@Component({
  selector: 'app-my-child',
  templateUrl: './my-child.component.html',
  styleUrls: ['./my-child.component.css']
})
export class CD020 implements OnInit {
    ngOnInit() {
    }
    @Output() childChanged = new EventEmitter<string>();
    onChange(value: string, test: string) {
        this.childChanged.emit(value);
    }
}

your parent html:

<app-my-child></app-my-child> <!-- uses the template selector name -->

your parent code:

//note the name inside the viewChild and the type of testComponent
@ViewChild(CD020) testComponent: CD020;

onChangeParent() {
    // must pass two arguments.
    this.testComponent.onChange("someValue","someTest");

}

edited Jun 1, 2017 at 7:10

answered Jun 1, 2017 at 6:57

John

11.6k5 gold badges60 silver badges75 bronze badges

2 Comments

Hampus Over a year ago

If ViewChild is used the way you suggest (with the selector name), wouldn't the field testComponent be an ElementRef or a TemplateRef?

John Over a year ago

@Hampus, I am sorry, I was writing the wrong answer. You should use the type of the component inside the @ViewChild() as well.

Collectives™ on Stack Overflow

Cannot read property 'onchange' of undefined error when calling function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related