CODEWITHSUNDEEP
angular
angular
angular

Reputation: 563

Call Service in Angular2.0

I am just start learning angular2.0. I already uses the services in angular1.But I dont know how can I use services in angular2 Here is my component.html file:

<form [ngFormModel]="loginForm" (click)="doLogin($event)">
    <input ngControl="email" type="email" placeholder="Your email" required>
    <input ngControl="password" type="password" placeholder="Your password" required>
  <button type="submit">Log in</button>
</form>

This is my typescript File:

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators,Control,ControlGroup } from 'angular2/common';
import { SampleService } from './sample.service';

@Component({
  selector: 'my-form',

  templateUrl: 'app/form.component.html'
  providers: [
    SampleService
  ]
})
export class FormComponent {
  //loginForm: ControlGroup;
  constructor(fb: FormBuilder) {
    this.loginForm = new ControlGroup({
      email: new Control("", Validators.required),
      password: new Control("", Validators.required)
    });
  }
  constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
  }
  doLogin(event){
    this._sampleService.login()
     .subscribe(
        data => /*this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."*/
        {
         this.countries = data;

        }
     );
    }

};

I have create the Sample service to get the data.

import { Hero } from './hero';
import { Injectable } from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx';
import {AppSettings} from './appSettings';
@Injectable()
export class SampleService {

  constructor(http: Http){
    this.http = http;
  }

  login(data){
    return this.http.get(AppSettings.API_ENDPOINT+"oceania").map(res => res.json(), err => err);

  }
}

Error is:

 this._sampleService.login() is undefiend

Upvotes: 0

Views: 149

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658155

This class has two constructors, that is not supported. You need to merge them into one

export class FormComponent {
//loginForm: ControlGroup;
  constructor(fb: FormBuilder) {
  this.loginForm = new ControlGroup({
  email: new Control("", Validators.required),
  password: new Control("", Validators.required)
});
  }
  constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
}
    doLogin(event){
         this._sampleService.login()
     .subscribe(
        data => /*this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."*/
        {
         this.countries = data;

        }
     );
    }

}

like

export class FormComponent {
//loginForm: ControlGroup;
  constructor(fb: FormBuilder, private _sampleService: SampleService) {
    this.loginForm = new ControlGroup({
      email: new Control("", Validators.required),
      password: new Control("", Validators.required)
    });
  }

  doLogin(event) {
    this._sampleService.login()
    .subscribe(
        data => /*this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."*/
        {
         this.countries = data;

        });
   }
}

also this is redundant and unnecessary

  constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
  }

if you add private or public to a constructor parameter then an instance property is already declared and the value assigned to it

  constructor(private _sampleService: SampleService){
    // this._sampleService = _sampleService;
  }

The commented out line throws because there is no _sampleService variable, only this._sampleSrevice.

Upvotes: 3

Related Questions