asp.net - Return List in Asp Mvc 5 With Angular 2 -

i need return list wtih angular2 in asp mvc 5 .

i write code in asp mvc :

model => recipes.cs:

public class recipes {     public string description { get; set; }     public string name { get; set; }     public string imagepath { get; set; } } 

controller :

public actionresult recipeslist()     {         var recipe = new list<recipes>         {             new recipes             {                 name="kianoush",                 description="enginner",                 imagepath="app/assets/image/hydrangeas.jpg"             },             new recipes             {                 name="el",                 description="enginner",                 imagepath="app/assets/image/desert.jpg"             }         };         return new contentresult         {             content = jsonconvert.serializeobject(recipe, new jsonserializersettings             {                 contractresolver = new camelcasepropertynamescontractresolver()             }),             contenttype = "application/json",             contentencoding = encoding.utf8         };     } 

angular :

recipes:

export interface irecipes { name: string; description: string; imagepath: string; } 

app.reipe:

import { component } '@angular/core'; import { } './recipelist/app.recipeslist';  @component({     selector: 'recipes-app',     templateurl: 'app/recipes/app.recipes.html' })  export class recipescomponent {  } 

app.recipe.html :

<div class="row"> <div class="col-md-5">     <recipeslist-app></recipeslist-app> </div> <div class="col-md-7">  </div> 

recipeservice:

import { injectable } '@angular/core'; import { irecipes } '../recipes'; import { http, response } '@angular/http'; import { observable } 'rxjs/observable'; import 'rxjs/rx';  @injectable() export class productservice {     private _producturl = '/home/recipeslist';     constructor(private _http: http) { }      getproducts(): observable<irecipes[]> {         return this._http.get(this._producturl)             .map((response: response) => <irecipes[]>response.json())             .do(data => console.log("all : " + json.stringify(data)))             .catch(this.handleerror)     };     private handleerror(error: response) {         console.error(error);         return observable.throw(error.json().error || 'server error');     } } 

recipelist:

import { component, input, oninit } '@angular/core'; import { irecipes } '../recipes'; import { productservice } '../recipelist/recipeservice';  @component({      selector: 'recipeslist-app',     templateurl: 'app/recipes/reipeslist/app.recipeslist.html' }) export class recipeslistcomponent implements oninit {      recipes: irecipes[];     constructor(private _productservice: productservice) { }     ngoninit(): void {         this._productservice.getproducts();     } } 

app.recipelist.html:

<a href="#" class="list-group-item clearfix"> <div class="pull-left">     <h4 class="list-group-item-heading">{{recipes.name}}</h4>     <p class="list-group-item-text">{{recipes.description}}</p> </div> <span class="pull-right">     <img class="img-responsive"          src="{{recipes.imagepath}}"          style="max-height: 50px;" /> </span> 

but not show me things . whats problem ? how can show list ?

/*************************************************************************************************/

how data assigned recipes variable in recipeslistcomponent? missing subscribe() call.

ngoninit(): void {     this._productservice.getproducts().subscribe((res: irecipes[]) => {       this.recipes = res;   },     error => console.log('something went wrong!')   ); } 

refer angular 2 http documentation

in case error, please post here.