Angular Cannot read property 'GetCarList' of undefined Error

Question

I want to order my car list in a child component by select control from another child component. But when i try to change i get error like 'Cannot read property 'GetCarList' of undefined'. I'm not too much experienced on Angular so i couldn't find a way in the internet.

And here's my codes;

• Parent Component

index.html;

<rac-carlistinfo></rac-carlistinfo>
<rac-carlistitems></rac-carlistitems>

• Child Component with Select Control

info.html;

<select id="slcOrder" name="slcOrder" class="m-select" (change)="onChange($event)">
    <option *ngFor="let item of orderList" value="{{ item?.Code }}">{{ item?.ShortDescription }}</option>
</select>

info.ts (CarsListInfoComponent)

import { Component, Output } from '@angular/core';
import { SiteService } from '../../../../services/site';
import { CarsListItemsComponent } from './items';

@Component({
    selector: 'rac-carlistinfo',
    templateUrl: './info.html'
})

export class CarsListInfoComponent {
    errorMsg: string;

    orderList: any;

    @Output() carListOrder: CarsListItemsComponent;

    constructor(private service: SiteService) {
    }

    ngOnInit() {
        this.GetLangContent();
    }

    onChange(event) {
        var target = event.target || event.srcElement || event.currentTarget;

        this.carListOrder.GetCarList(target.value);
    }

    GetLangContent() {
        this.service.get("Site", "GetLangContentByCode", "order").subscribe((resData: any) => {
            this.orderList = resData;
        }, resError => this.errorMsg = resError);
    }
}

• Child Component with Car List

items.html;

<div *ngFor="let item of carList">
    <h2>{{ item?.Title }}</h2>
    <span>{{ item?.Price }} TL</span>
</div>

items.ts (CarsListItemsComponent)

import { Component } from '@angular/core';
import { SiteService } from '../../../../services/site';

@Component({
    selector: 'rac-carlistitems',
    templateUrl: './items.html'
})

export class CarsListItemsComponent {
    errorMsg: string;

    carList: any;

    constructor(private service: SiteService) {
    }

    ngOnInit() {
        this.GetCarList();
    }

    public GetCarList(order: string = null) {
        this.service.get("Site", "GetCarList", order).subscribe((resData: any) => {
            this.carList = resData;
        }, resError => this.errorMsg = resError);
    }
}

Answer 1

There are many problems here:

1. @Output() carListOrder: CarsListItemsComponent; this doesn't make sense. Output() is meant to emit events.
2. @Output() carListOrder: CarsListItemsComponent; you are defining this as of CarsListItemsComponent but you actually have not any reference to that component. That's why you get

Cannot read property 'GetCarList' of undefined Error

In order to get this working you have to:

1. Add Input (e.g. carList) to your rac-carlistitems component.
2. Add Output (e.g. infoChange) to your rac-carlistinfo component.
3. Then listen for infoChange to the container component which includes the other ones and move that GetCarList there.

Putting all these down.

//CarsListInfoComponent

@Output() infoChange = new EventEmitter<any>();

onChange(event) {
        var target = event.target || event.srcElement || event.currentTarget;

        this.infoChange.emit(target.value);
    }

//CarsListItemsComponent
@Input() carList: any[];

//Container component html

<rac-carlistinfo (infoChange)="GetCarList($event)"></rac-carlistinfo>
<rac-carlistitems [carList]="carList"></rac-carlistitems>

//Container component ts

carList: any[] = [];

GetCarList(order: string = null) {
        this.service.get("Site", "GetCarList", order).subscribe((resData: any) => {
            this.carList = resData;
        }, resError => this.errorMsg = resError);
    }

Answer 2

TBH I'm not familiar on using @Output.

If I were you this will be my approach.

export class CarsListInfoComponent {
errorMsg: string;

orderList: any;

constructor(private service: SiteService, private carListOrder: CarsListItemsComponent) {
}

  ...

onChange(event) {
    var target = event.target || event.srcElement || event.currentTarget;

    this.carListOrder.GetCarList(target.value);
}