AngularFire not fetching conditional values on first load.

[michaeldever]

Description

• In remote config, we have set some conditions based on an attribute of the currently logged in user user_attribute. I've sanitised where the user comes from below, but this is how we set it once fetched.
• We have a directive which hides and shows a component based on the value that comes back from remote config.
• When we first login, remote config does fetch, but it fetches the default values.
• If we stay logged in and refresh enough times, the correct value is fetched from remote config, and our element renders, but it takes several refreshes, and without those refreshs, will not render.

Version info

Angular:

^11.2.0

Firebase:

^8.9.1

AngularFire:

^6.1.5

Other (e.g. Ionic/Cordova, Node, browser, operating system):

Node: 17.0.1

How to reproduce these conditions

Steps to set up and reproduce

app.component.ts

export class AppComponent {
  constructor(
    private analytics: AngularFireAnalytics,
  ) {
      this.analytics.setUserProperties({
        user_attribute: user.attribute
      })
  }
 ...

element.directive.ts

import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { AngularFireAnalytics } from '@angular/fire/analytics';
import { AngularFireRemoteConfig, Parameter } from '@angular/fire/remote-config';
import { Subscription } from 'rxjs';

/**
 * Directive to add feature flag to an element.
 */
@Directive({
  selector: '[elementRemoteFlag]',
})
export class ElementRemoteFlagDirective implements OnInit, OnDestroy {
  // NOTE: the remote flag to display this element for.
  @Input() elementRemoteFlag: string;

  private subscriptions: Subscription[] = [];
  private shouldShow = false;

  constructor(private element: ElementRef, private remoteConfig: AngularFireRemoteConfig, private analytics: AngularFireAnalytics) {
    this.element.nativeElement.style.display = 'none';
  }

  ngOnInit() {
    this.subscriptions.push(
      this.remoteConfig.changes.subscribe(
        (remoteParameter: Parameter) => {
          if (remoteParameter?.key === this.elementRemoteFlag && remoteParameter?._value === 'true') {
            this.shouldShow = true;
          }

          if (this.shouldShow) {
            this.element.nativeElement.style.display = '';
          } else {
            this.element.nativeElement.style.display = 'none';
          }
        },
        e => {
          console.log(e);
        }
      )
    );
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => subscription.unsubscribe());
  }
}

Sample data and security rules

N/A

Debug output

** Errors in the JavaScript console **

None.

** Output from firebase.database().enableLogging(true); **

N/A.

** Screenshots **

N/A

Expected behavior

That the remote config is loaded, based on the conditions for the user that I have set using setUserProperties

Actual behavior

• Remote config is loaded, using default values (false).
• After refreshing multiple times, the correct values are pulled from remote config.

[Fynsky]

We have the same problem with "@angular/common": "11.2.5" "@angular/fire": "6.1.5" "firebase": "8.9.1" @michaeldever are you still having the problem of getting conditional values, or has it been resolved?