CODEWITHSUNDEEP
angulartypescriptangular2-templateangular2-services
Erdeniz Korkmaz
Erdeniz Korkmaz

Reputation: 333

Binding Component's variable to service

I need to take a reference of a variable that is in a service. The variable in the service also can be changed by another function that is in another component. It is hard to explain so let me show you.

SharedService;

@Injectable()
export class SharedService {

    sharedpages = {
        items: [
                {id: "1", link: "", text: "Epiaş", parent: "0", active: false, tabbed: false},
                {id: "T001", link: "T001", text: "T001 | Abone Bul", parent: "1", active: false, tabbed: false},
               ],
            getAll:  () => {
                return this.sharedpages.items;
            }
        };
    }

AppComponent;

export class AppComponent {
  public pages;

  constructor(public SharedService: SharedService) {
// The code below just takes sharedpages from sharedservice once then it doesn't takes updates of the sharedpages.
        this.pages = SharedService.sharedpages.getAll();

//The code below also doesn't work
        this.pages = SharedService.sharedpages.items;
      }
    }

I want to update pages variable from AppComponent whenever sharedpages from SharedService changes.

for example some other function from another component changed sharedpages.items to blank array. When this happen I want to make pages variable from Appcomponent to blank array too.

Are there any solution for this? Thank you...

Upvotes: 0

Views: 306

Answers (3)

Josf
Josf

Reputation: 786

Try this:

@Injectable()
export class SharedService {

public pagesChanged$: ReplaySubject<any> = new ReplaySubject<any>(1);
sharedpages = {
    items: [
            {id: "1", link: "", text: "Epiaş", parent: "0", active: false, tabbed: false},
            {id: "T001", link: "T001", text: "T001 | Abone Bul", parent: "1", active: false, tabbed: false},
           ],
        getAll:  () => {
            return this.sharedpages.items;
        }
    };
}

AppComponent;

export class AppComponent implements OnInit {
 public pages;

 constructor(public sharedService: SharedService) {}

ngOnInit() {
    this.sharedService.pagesChanged$.subscribe(data => {
        this.pages = data;
    });
}

}

And in your component on which the pages getting changed, emit new value

export class AnotherComponent {

 constructor(public sharedService: SharedService) {}

onPageChange() {
    this.sharedService.pagesChanged$.next(null); // Emits null as new value
}

}

Added a working example https://ng-run.com/edit/1zZGSvohchUeEG8dacXt?open=app%2Fanother.component.ts&layout=2

Upvotes: 1

devilhector
devilhector

Reputation: 46

You can go with Observables/Subscription. While updating service variable in any component, say

updateSharedPages() { // your logic to update goes here }

call a method that trigger the changes. This is done using BehaviorSubject or Subject depending on your use case. Let's take a variable (in your service)

updateSharedModelSubject = new Behavior subject<boolean>(true);

Then

triggerSharedModelChange() { this.updateSharedModelSubject.next(this.sharedpages); }

You can then subscribe to this anywhere in any component.

Upvotes: 1

user7396942
user7396942

Reputation:

You need import Inject on Service

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {

and import on your component 

import { SharedService } from './SharedService ';
export class AppComponent {
   console.log(SharedService.sharedpages);

Upvotes: 0

Related Questions