How can i pass simple data (json) from angular2 final(2.0.1)

Question

this code it's work on Angular2 2.0.0.rc.2 but now it's did't work Error. import FORM_DIRECTIVES ,HTTP_PROVIDERS ,bootstrap

how to fix this to Angular2 v2.0.1

import { Component, OnInit } from "@angular/core";
import { Http, Response, URLSearchParams} from "@angular/http";
import { FORM_DIRECTIVES } from "@angular/common"    //error

can't import FORM_DIRECTIVES in Angular v2.0.1

import {Observable} from 'rxjs/Observable';
import { IFood} from "./food";
import { Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";

@Component({

selector: "my-app",
directives: [FORM_DIRECTIVES],   //error
templateUrl: "./app/form.html"
})

export class AppComponent implements OnInit {
public values: string[];
public headers: Headers;
errorMessage: string;
foods: IFood[];
foodModel = <IFood>{}; 

constructor(private http: Http) {
    this.http = http;
    this.headers = new Headers();
    this.headers.append("Content-Type", "application/json");
}

ngOnInit() {
    return this.http.get("/home/getdata")
        .map((response: Response) => <IFood[]>response.json())
        .subscribe(data => this.foods = data, error => this.errorMessage = <any>error);
}
onSubmit(form): void {
    let headers = new Headers({ "Content-Type": "application/json" }); 
    let options = new RequestOptions({ headers: headers });
    console.log(this.foodModel);
    console.log(JSON.stringify(this.foodModel));

    this.http.post("/home/postform", JSON.stringify(this.foodModel), options)
        .map((response: Response) => <IFood>response.json())
        .subscribe(json => { alert(this.foodModel.foodId +"  "+ this.foodModel.foodName); /* handle it */ });
}

and in main.ts

import { AppComponent } from './app.component';
import { bootstrap }    from '@angular/platform-browser-dynamic';

can't import bootsrap

import {HTTP_PROVIDERS} from '@angular/http';   //error http_providers

can't import HTTP_PROVIDERS bootstrap(AppComponent, [HTTP_PROVIDERS]); //error bootstrap

how to fix this to Angular2 v2.0.1

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-10-06T04:25:36

You need to create NgModules See https://angular.io/docs/ts/latest/guide/ngmodule.html for detaisl

@NgModule({
  imports: [BrowserModule, HttpModule, FormsModule, ReativeFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule{}

and change the bootstrapping code

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

How can i pass simple data (json) from angular2 final(2.0.1)

1 Answers