title: How to use observable value in to an angular pipe?
body: <p>I need to wait for an observable value which have the language for my logged user to execute the 'transform' method in a custom date pipe that I made. the problem is that when the user info is returned from the server several dates from mi app are rendered with the pipe without the proper language, as result the app show an unwanted date format. The next code sample fix this, but is a bad practice. Is there a way to do this using the observables functionalities?</p>
  <pre><code>import {
      Injector,
      Pipe,
      PipeTransform
  } from '@angular/core';
  import { CurrentUserService } from '@lib/app-npm-base';
  @Pipe({
      name: 'customDate'
  })
  export class CustomDatePipe implements PipeTransform {
      lang = '';
  
      public constructor(
          private readonly injector: Injector, 
          private readonly 
          userService: CurrentUserService
      ) {
          this.lang = this.getLang();
      }
      async getLang(): string {
          return (await this.userService.getCurrentUserPreferredLanguage().toPromise()).language;
      }
      transform(
          value: Date | null | undefined,
          lang: string | null | undefined,
          options: Intl.DateTimeFormatOptions = {
              day: '2-digit',
              month: '2-digit',
              year: 'numeric'
          },
          isTime = false
      ): string {
          if(value === null || value === undefined) {
              return '';
          }
          let localLan = lang === null || lang === undefined ? this.lang : lang;
          let format = isTime ? value.toLocaleTimeString(localLan, options) : value.toLocaleDateString(localLan, options);
          return format;
      }
  }
  </code></pre>
  <p>As you can see i use an <strong>async</strong> method to return an <strong>await</strong> of the 'Observable' transformed to a 'Promise', then I call the method on the constructor and I have the desire result.</p>
  <h3>Update 01</h3>
  <p>Using the approach described by <a href="https://stackoverflow.com/users/3329325/alex">Alex</a> I had the idea of inject <strong>AsincPipe</strong> in to my <strong>CustomDatePipe</strong> and call the <strong>AsincPipe</strong> transform method with my Observable as argument.</p>
  <pre><code>....
      public constructor(
          private readonly injector: Injector,
          protected readonly userService: CurrentUserService,
          private readonly async: AsyncPipe
      ) {
          // Empty
      }
      transform(
          value: Date | null | undefined,
          lang: string | null | undefined,
          options: Intl.DateTimeFormatOptions = {
              day: '2-digit',
              month: '2-digit',
              year: 'numeric'
          },
          isTime = false
      ): string {
          return this.async.transform(this.userService.getCurrentUserPreferredLanguage().pipe(map((preferredLanguage: PreferredLanguage) =&gt; {
              if(value === null || value === undefined) {
                  return '';
              }
              let localLan = lang === null || lang === undefined ? preferredLanguage.language : lang;
              let format = isTime ? value.toLocaleTimeString(localLan, options) : value.toLocaleDateString(localLan, options);
              return format;
          })));
      }
  }
  </code></pre>
  <p>then in my module:</p>
  <pre><code>....
  @NgModule({
      declarations: [
          CustomDatePipe,
          ....
      ],
      exports: [
          CustomDatePipe,
          .....
      ],
      providers: [
          AsyncPipe,
          ChangeDetectorRef as Provider,
          CustomDatePipe,
          .....
      ]
  })
  ....
  </code></pre>
  <p>This is a better approach and still work, but I getting now <code>ERROR TypeError: this._ref.markForCheck is not a function</code> error on the console. The error occur because <code>this._ref</code> do not have the method <code>markForCheck()</code> in 'common.js'. What could be the reason for this?</p>