Angular2 Global Variable service

Question

i am trying to make a global variable to handle when to show the loader on my website. I followed this but i get the following errors.

Generic Type 'Observer' requires 1 type argument(s) on this line

this.ShowLoaderChange = new Observable((observer:Observer){

also i can't seem to see where they declared the variable for the ChangeObserver as i am using here:

this.ShowLoaderChangeObserver = observer;

and here

this.ShowLoaderChangeObserver.next(this.ShowLoader);


import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import { Injectable } from 'angular2/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class LoaderService {
  public ShowLoader;
  ShowLoaderChange: Observable<any>;

  constructor() {
     this.ShowLoaderChange = new Observable((observer:Observer){
         this.ShowLoaderChangeObserver = observer;
     })
  }

  setData() {
    this.ShowLoader = !this.ShowLoader;
    this.ShowLoaderChangeObserver.next(this.ShowLoader);
  }
}

EDIT: After changing my code as per the answer below and it making sense it get TypeError: Cannot read property 'next' of undefined in [null] this comes from the line

this.ShowLoaderChangeObserver.next(this.ShowLoader);

I am calling the function like this

import {LoaderService} from '../LoaderService'
export class AdminDashboardComponent implements OnInit{
constructor (private loader:LoaderService){}

ngOnInit():any{
   this.loader.setData();

} }

EDIT: NEW SERVICE

import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import { Injectable } from 'angular2/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class LoaderService {
   public ShowLoader: boolean;
   ShowLoaderChange: Observable<boolean>;
   ShowLoaderChangeObserver: Observer<boolean>;

   constructor() {
      this.ShowLoaderChange = new Observable((observer:Observer<boolean>) 
     => {
         this.ShowLoaderChangeObserver = observer;
        })
   }

  setData() {
      this.ShowLoader = !this.ShowLoader;
      this.ShowLoaderChangeObserver.next(this.ShowLoader);
  }

}

score 1 · Accepted Answer · answered May 16 '17 at 08:54

1

You need to specify the type of value that your observable will yield as the type parameter. In your case since you have typed your observable as ShowLoaderChange: Observable<any>, you can specify the type of your observer as any as well:

this.ShowLoaderChange = new Observable((observer:Observer<any>) => {
    this.ShowLoaderChangeObserver = observer;
});

But looking at your code you can probably type your observable as boolean and avoid using any since you are only yielding boolean values from your observer:

export class LoaderService {
  public ShowLoader: boolean;
  ShowLoaderChange: Observable<boolean>;
  ShowLoaderChangeObserver: Observer<boolean>;

  constructor() {
     this.ShowLoaderChange = new Observable((observer:Observer<boolean>) => {
         this.ShowLoaderChangeObserver = observer;
     })
  }

  setData() {
    this.ShowLoader = !this.ShowLoader;
    this.ShowLoaderChangeObserver.next(this.ShowLoader);
  }
}

answered May 16 '17 at 08:54

Saravana

37,852
18
100
108

Thanks this makes more sense to me. The only problem is now i am getting an error TypeError: Cannot read property 'next' of undefined in [null] on the line this.ShowLoaderChangeObserver.next(this.ShowLoader); – Arno4Jackie May 16 '17 at 09:26
How are you calling `setData`? Is `this` pointing to `LoaderService` instance inside `setData` and at `this.ShowLoaderChangeObserver = observer;`? – Saravana May 16 '17 at 09:35
I am not able to reproduce this. Can you see what you have for `this` in `setData` and inside `(observer:Observer) => { this.ShowLoaderChangeObserver = observer; }` – Saravana May 16 '17 at 12:06
i am then calling service.setData() in my component Child. I did also bootstrap my LoaderService – Arno4Jackie May 16 '17 at 14:00

Angular2 Global Variable service

1 Answers1