How to set input model value from service in Angular?

Question

Here issue is how to set the input model value from a service in Angular 2.

Here is my sample code:
component:

//our root app component
import {Component} from 'angular2/core'
import {Service} from './service'

@Component({
  selector: 'my-directive',
  providers: [],
  template: `<input [(ngModel)]="abc">`,
  directives: []
})
export class Directive {
  constructor(public service: Service) {
    this.abc = this.service.value;
  }
}

service:

//our root app component import {Injectable} from 'angular2/core'

@Injectable()
export class Service {
  constructor() {
    this.value = "service"
  }
  abcFun(){
    // need to update value from here
  }
}

plunkr here

Is _abcService returning what you want to store inside this.modal? — theblindprophet
– theblindprophet, Commented Aug 2, 2016 at 18:01
We have one specific scenario, that's why we need to update value from that service it's self. — Karthik
– Karthik, Commented Aug 2, 2016 at 18:12
it looks like you are missing import or directive. the [(ngModel)] screw everything — Avi
– Avi, Commented Aug 2, 2016 at 20:37

Chandru · Accepted Answer · 2017-09-12 07:56:01Z

4

Try this :

component.html

<input type="text" [(ngModel)]="abc">

component.ts

private abc: string;

constructor(
        public homeService: HomeService
    ) { }
ngOnInit() {
        this.abc = this.homeService.value;
    }

component.service.ts

public value: string;

constructor(private http: Http) { 
        this.value = "Hello world";
    }

answered Sep 12, 2017 at 7:56

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hansmaad · Accepted Answer · 2017-09-12 07:15:17Z

The problem is that you have different instances of the value in Service and Controller. If you change value in the service, you only change the instance there, the instance of the controller is still the old one. It's the same the other way around. You can solve this by storing the string in an object like this.

@Injectable()
export class Service {
  data = { value: '' };
  constructor() {
    this.data.value = "service"
  }
}

@Component({
  selector: 'my-directive',
  providers: [],
  template: `<input [(ngModel)]="abc.value">`,
  directives: []
})
export class Directive {
  constructor(public service: Service) {
    this.abc = this.service.data;
  }
}

Another solution is to setup communication with observables as shown here.

@Injectable()
export class Service {
  valueSource = new Subject<string>();
  value$ = this.valueSource.asObservable();
  updateValue(value: string) {
    this.valueSource.next(value);
  }
}

@Component({
  selector: 'my-directive',
  providers: [],
  template: `<input [(ngModel)]="value">`,
  directives: []
})
export class Directive {
  value: string;
  constructor(public service: Service) {
    this.service.value$.subscribe(value => this.value = value);
  }
}

Collectives™ on Stack Overflow

How to set input model value from service in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related