CODEWITHSUNDEEP
angularjstypescript
gmesorio
gmesorio

Reputation: 453

AngularJS + Typescript: Call child object method from HTML

I am working on an angular app trying to call an child object method within a repeater. I have a selected item which has a company item. The company class has a getAddressText() method, which returns the address text for the company, which iw ould like to show on screen.

Below is the code to help my explanation. In the application I see that ctrl.selectedItem.Company is correctly loaded, but it appears to be ignoring the call to the function.

HTML + AngularJS code:

<span>{{ctrl.selectedItem.Company.getAddressText()}}</span>

Typescript:

namespace app.controllers {
    class MyController {
        public selectedItem: app.models.Item;
    }
}
namespace app.models {
    export class Item {
        public Company: Company;
        constructor() {}
    }
    export class Company {
        constructor() {}
        getAddressText(): string {
            return "Some text...";
        }
    }
}

Upvotes: 0

Views: 395

Answers (1)

Aleksey L.
Aleksey L.

Reputation: 37938

The problem is that you're getting plain js objects from service (json). They may look like Item and Company (have the same properties), but they don't have the expected methods.
If you want to have instances of mentioned types you should map json objects to these types (for example in your service or using $http transform response if you're getting data through $http service):

var convertedItems = jsonItems.map(i => {
    var item = new Item();
    item.Company = new Company();
    //map required properties from i (or use some library for cloning)
    return item;
});

Another approach would be to move logic(methods) to helper class or maybe to controller or service and leave data objects clean (in this case interface definition will be enough).

Upvotes: 1

Related Questions