Vok Vok - 3 months ago 74
TypeScript Question

Do I need to duplicate my Entity Framework classes in Typescript when using Angular 2?

Let's say I have a nice C# backend with Entity Framework. I've got my database set up and a simple class like

public class MyItem
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ItemID { get; set; }
public string ItemName { get; set; }
}


I've got a nice Angular2 front end where I retrieve data from an API and present such as...

template: '<div>{{ItemName}} - {{ItemID}}</div>'


At the moment I have a duplicate, seemingly redundant typescript class ie

export class MyItem{
ItemID: number;
ItemName: string;
}


Is there any way I can avoid this typescript class? Can I bind to an object that isn't defined in advance? In Angular 1 we could bind to any property on the scope
{{MyItem.SomeProperty}}

Answer

The TypeScript class/model isn't mandatory.

You can load your HTTP data into a variable and access it like any other object with properties and arrays. e.g. data.propertyname or data.arrayname[0].propertyname.

In Angular2 you can use the HTTP service and return data which can then be converted into a JSON object using data.json()

Here is an example:

import { Http } from '@angular/http';

...

constructor(private http: Http) {
{
    this.http.get(url).subscribe(
        data => {
            var json = data.json();
            console.log(json.propertyName);  
        }
    );
}