AngularFire not fetching conditional values on first load.

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.

angular / angularfire

AngularFire not fetching conditional values on first load. #3060