Remote Config

export function provideRemoteConfig(fn: () => RemoteConfig): EnvironmentProviders;
export function getRemoteConfig(app?: FirebaseApp): RemoteConfig;

export class RemoteConfig extends RemoteConfig {}
export class RemoteConfigInstances extends Array<RemoteConfig> {}
export const remoteConfigInstance$: Observable<RemoteConfig>;

/**
 * Fetch and activate config values
 * @param remoteConfig - Remote Config instance
 * @returns Promise resolving to activation status
 */
export function fetchAndActivate(remoteConfig: RemoteConfig): Promise<boolean>;

/**
 * Fetch config values without activating
 * @param remoteConfig - Remote Config instance
 * @returns Promise that resolves when fetch completes
 */
export function fetchConfig(remoteConfig: RemoteConfig): Promise<void>;

/**
 * Activate fetched config values
 * @param remoteConfig - Remote Config instance
 * @returns Promise resolving to activation status
 */
export function activate(remoteConfig: RemoteConfig): Promise<boolean>;

/**
 * Get config value
 * @param remoteConfig - Remote Config instance
 * @param key - Config parameter key
 * @returns Config value
 */
export function getValue(remoteConfig: RemoteConfig, key: string): Value;

/**
 * Get all config values
 * @param remoteConfig - Remote Config instance
 * @returns All config values
 */
export function getAll(remoteConfig: RemoteConfig): { [key: string]: Value };

/**
 * Check if Remote Config is supported
 * @returns Promise resolving to support status
 */
export function isSupported(): Promise<boolean>;

interface Value {
  asBoolean(): boolean;
  asNumber(): number;
  asString(): string;
  getSource(): ValueSource;
}

type ValueSource = 'static' | 'default' | 'remote';

import { Component, inject } from '@angular/core';
import { RemoteConfig, fetchAndActivate, getValue } from '@angular/fire/remote-config';

@Component({
  selector: 'app-remote-config',
  template: `
    <div [style.background-color]="backgroundColor">
      <h2>{{ welcomeMessage }}</h2>
      <button *ngIf="showNewFeature" (click)="useNewFeature()">
        Try New Feature!
      </button>
    </div>
  `,
})
export class RemoteConfigComponent {
  private remoteConfig = inject(RemoteConfig);
  
  welcomeMessage = 'Welcome!';
  backgroundColor = '#ffffff';
  showNewFeature = false;

  async ngOnInit() {
    try {
      // Set default values
      await this.remoteConfig.defaultConfig = {
        'welcome_message': 'Welcome to our app!',
        'background_color': '#f0f0f0',
        'enable_new_feature': false
      };

      // Fetch and activate remote config
      const activated = await fetchAndActivate(this.remoteConfig);
      console.log('Config activated:', activated);
      
      // Apply config values
      this.applyConfig();
    } catch (error) {
      console.error('Remote config error:', error);
    }
  }

  private applyConfig() {
    this.welcomeMessage = getValue(this.remoteConfig, 'welcome_message').asString();
    this.backgroundColor = getValue(this.remoteConfig, 'background_color').asString();
    this.showNewFeature = getValue(this.remoteConfig, 'enable_new_feature').asBoolean();
  }

  useNewFeature() {
    console.log('Using new feature!');
  }
}