Get result outside subscribe in Angular

Question

I have a component's method, but it has some unexpected behavior:

private fetchExternalStyleSheet(outerHTML: string): string[] {
  let externalStyleSheetText: string;
  let match: RegExpExecArray;

  const matchedHrefs = [];
  while (match = this.hrefReg.exec(outerHTML)) {
    matchedHrefs.push(match[1]);
  }
  const requestedUrl = this.url + matchedHrefs[0];
  this._ApiService.makeRequest(requestedUrl, ActionType.content)
    .subscribe((response: any) => {
      externalStyleSheetText = response.content;
      console.log('inside subscribe', externalStyleSheetText); // => expected content
  });
  console.log('outside subscribe', externalStyleSheetText); // => undefined

  return this.parseStyleSheetText(externalStyleSheetText);
}

inside .subscribe method externalStyleSheetText binding has expected value, while outside it gives me undefined. I suppose it related with async behavior of subscribe method. I reviewed some related issues but still it is unsolved, because of the fact that everybody suggests make request via subscribe in ngOnInit lifecycle hook and it means that we get request result before component initialization. But in my case I have to make it outside ngOnInit, so I get undefined

May I ask why you need this, since what you described it's proper and expected behavior of Observable? — andrey.shedko, Sep 24 '18 at 14:52
I should parse external style sheet content to find @media queries, so I have to retrieve style sheet text first — a_zatula, Sep 24 '18 at 14:55
I have to pass `externalStyleSheetText` to `parseStyleSheetText` method — a_zatula, Sep 24 '18 at 14:57
@a_zatula, as it was said, use parseStyleSheetText method just inside subscribe and if needed then emit this to parent component. — andrey.shedko, Sep 24 '18 at 15:01
You are working with async Programming you need to change your approach. Kindly Have a look into https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Vikas, Sep 24 '18 at 15:01
@andrey.shedko, well how to emit result of `parseStyleSheetText` ? — a_zatula, Sep 24 '18 at 15:06
@a_zatula have you taken a look at my answer? Does it help you? — ShamPooSham, Sep 26 '18 at 07:06

score 1 · Accepted Answer · answered Sep 24 '18 at 16:10

To solve it, I suppose you have to make fetchExternalStyleSheet return an observable, and subscribe to it from the outside call. So fetchExternalStyleSheet will look something like this:

private fetchExternalStyleSheet(outerHTML: string): Observable<string[]> {
    let externalStyleSheetText: string;
    let match: RegExpExecArray;

    const matchedHrefs = [];
    while (match = this.hrefReg.exec(outerHTML)) {
      matchedHrefs.push(match[1]);
    }
    const requestedUrl = this.url + matchedHrefs[0];
    return this._ApiService.makeRequest(requestedUrl, ActionType.content)
      .pipe(map((response: any) => {
        externalStyleSheetText = response.content;
        return this.parseStyleSheetText(externalStyleSheetText);
      }));
  }

and in the call, you subscribe to the result, like this:

callerMethod() {
    this.fetchExternalStyleSheet('<h1>Test</h1>').subscribe(response => {
      this.parsedStylesheet = response;
    })
  }

I made a stackblitz, where clicking a button calls callerMethod: https://stackblitz.com/edit/angular-tpogff

Get result outside subscribe in Angular

1 Answers1