CODEWITHSUNDEEP
jsonangularrxjsobservable
joeCarpenter
joeCarpenter

Reputation: 1535

Angular 2: Is there a way of handling Observable (async) in the Component instead of of using the pipe in the template?

I'm currently using Observable for fetching some data in an Angular 2 app, however I only want to send the data for display in my template after the request is completed. I know there is the use of "myValue | async" however for the purpose of this app I need to capture the value in a variable and send that variable (with the final value) to my template. This is my code

     dataRetrieved() {
     this._privateVariable.getData();//this subscribes to an observable
     return true;//if the request was completed
 }

Is there a way to do that? Thank you!

Update:

Thank you for your replies. Here is a better sample of what I have:

JSON:

        { 
        "data": 
           {
             "id" : 1,
              "dataDescription": "dummy text data to save"
            } 
         }

HTML template:

<div>[ngmodel] = 'myVariable' </div> <!--myVariable should contain the value of "dataDescription" from my json object.  Here when I use the pipe/async instead of a variable I get an error  (_myPrivateVariable.myData | async)?.dataDescription  -->

MyComponent:

  constructor (private _privateVariable: MyService){}
    ngOnInit() {


  this._privateVariable.getData();//this retrieves a json object, I want to be able to retrieve the value I need here instead that in the view using "| async"

MyService:

  private _myData:BehaviorSubject<any> = new BehaviorSubject({});


 public myData: Observable<any> = this._myData.asObservable();


   getData (): Observable<any> {
    let obs = this._http.get(URL).cache();
    obs.subscribe( (response : Response) => {
        let responseData = response.json();            
        this._myData.next(responseData.data);

    });

In the end, all I need is to set myVariable = "dummy text data to save", makes sense?

Thank you!

Upvotes: 2

Views: 6930

Answers (2)

dotcs
dotcs

Reputation: 2296

The async pipe handles the subscription for you. In case you want to do the subscription manually you can always subscribe to an Observable and handle the update of the variable(s) yourself.

See this plnkr for demonstration.

Relevant code:

import {Observable} from 'rxjs/Observable';

import "rxjs/add/observable/interval";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <p>Counter with async: {{ counter | async }}</p>
      <p>Counter without async: {{ subscribedCounter }}</p>
    </div>
  `,
})
export class App {
  counter: Observable<number>;
  subscribedCounter: number;
  constructor() {
    this.counter = Observable.interval(1000);
    this.counter.subscribe(
      v => { this.subscribedCounter = v; }
    );
  }
}

Upvotes: 6

Krenom
Krenom

Reputation: 2108

My answer to...

How can I create a variable in a service that gets its data from a promise yet is shared between two components?

... covers a basic example of what you want to do (from your Updated question).

Upvotes: 0

Related Questions