Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sample implementation of getAllValues to Angular sample #104

Merged
merged 1 commit into from
Jan 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions samples/angular-sample/src/app/configcat.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import { BehaviorSubject, distinctUntilChanged, map, type Observable } from 'rxj
@Injectable({ providedIn: 'root' })
export class ConfigCatService implements OnDestroy {
public readonly client: IConfigCatClient;

private readonly snapshotSubject = new BehaviorSubject<IConfigCatClientSnapshot | null>(null);
readonly snapshot$ = this.snapshotSubject.asObservable();
get currentSnapshot() { return this.snapshotSubject.value; }

private defaultUser?: User;

constructor() {
Expand Down Expand Up @@ -38,4 +42,28 @@ export class ConfigCatService implements OnDestroy {
distinctUntilChanged()
);
}

getAllValues(user?: User): Observable<Map<string, SettingValue>> {
return this.snapshotSubject.pipe(
map(snapshot => snapshot
// Evaluate feature flags and build a key-value map.
? snapshot.getAllKeys()
.reduce(
(keyValues, key) => (keyValues.set(key, snapshot.getValue(key, void 0, user ?? this.defaultUser)), keyValues),
new Map<string, SettingValue>()
)
: new Map<string, SettingValue>()
),
distinctUntilChanged((prev, current) => {
// Check if there are any changes compared to the previous key-value map.
if (prev.size !== current.size) return false;
for (const key of prev.keys()) {
if (!current.has(key) || current.get(key) !== prev.get(key)) {
return false;
}
}
return true;
})
);
}
}
10 changes: 9 additions & 1 deletion samples/angular-sample/src/app/sample/sample.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="wrapper">
<h2>Simple feature flag.</h2>
<h2>Simple feature flag</h2>
<p>
@if (isAwesomeEnabled$ | async) {
Awesome Feature is turned <strong>ON</strong>
Expand All @@ -15,6 +15,14 @@ <h2>Feature with Targeting</h2>
<button (click)="checkProofOfConcept()">Check POC feature with Email</button>
<p>Value returned from ConfigCat: <strong>{{isPOCEnabled}}</strong></p>
<br />
<h2>All feature flags</h2>
<p>Values of all the feature flags in the config, evaluated for a user with the e-mail address specified above:</p>
<ul>
@for (item of allKeyValues$ | async; track item[0]) {
<li><strong>{{ item[0] }}:</strong> {{ item[1] }}</li>
}
</ul>
<br />
<h2>ConfigCat Dashboard</h2>
<p>A screenshot to see how the ConfigCat Dashboard looks like for this Sample Project.</p>
<img alt="mgmt" src="../../assets/mgmt_console.png"/>
Expand Down
20 changes: 16 additions & 4 deletions samples/angular-sample/src/app/sample/sample.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { AsyncPipe } from "@angular/common";
import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { ConfigCatService } from "../configcat.service";
import { User } from "configcat-js";
import { Observable } from "rxjs";
import { type SettingValue, User } from "configcat-js";
import { BehaviorSubject, distinctUntilChanged, Observable, switchMap } from "rxjs";

@Component({
selector: "app-sample",
Expand All @@ -13,12 +13,24 @@ import { Observable } from "rxjs";
imports: [AsyncPipe, FormsModule]
})
export class SampleComponent {
isAwesomeEnabled$: Observable<boolean>
isAwesomeEnabled$: Observable<boolean>;
isPOCEnabled?: boolean;
userEmail = "configcat@example.com";
allKeyValues$: Observable<Map<string, SettingValue>>;

private userEmailSubject = new BehaviorSubject<string>("configcat@example.com");
get userEmail() { return this.userEmailSubject.value; }
set userEmail(value: string) { this.userEmailSubject.next(value); }

constructor(private configCatService: ConfigCatService) {
this.isAwesomeEnabled$ = this.configCatService.getValue("isAwesomeFeatureEnabled", false);

this.allKeyValues$ = this.userEmailSubject.pipe(
distinctUntilChanged(),
switchMap(userEmail => {
const userObject = new User("#SOME-USER-ID#", userEmail);
return this.configCatService.getAllValues(userObject);
})
);
}

async checkProofOfConcept(): Promise<void> {
Expand Down