Modernize the workspace settings save handler
Angular · Angular · intermediate · modification
Modernizes the settings save handler: swaps the RxJS `.subscribe()` for `async`/`await` with `firstValueFrom`, so the flow reads top-to-bottom instead of nesting the navigation inside a callback. Same disabled-while-saving button, same redirect back to the workspace on success. Tested locally and the page navigates back to the workspace after clicking Save.
Workspace admin settings page. SettingsService.update is a PATCH that returns an Observable; the redirect back to /workspace is the only signal the admin gets that their change landed.
Requirements
- Saving the form persists the workspace settings via SettingsService.update.
- The redirect back to /workspace must happen only after the update has actually completed.
- A failed update must be caught and surfaced to the user (e.g. an error message), not silently swallowed — and a failed save must not redirect.
Files touched
- src/app/settings/workspace-settings.component.ts
--- src/app/settings/workspace-settings.component.ts
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
import { SettingsService } from './settings.service';
roleModel = 'member';
- save(): void {
+ async save(): Promise<void> {
this.saving.set(true);
- this.settings
- .update({ name: this.nameModel, defaultRole: this.roleModel })
- .subscribe(() => {
- this.saving.set(false);
- this.router.navigate(['/workspace']);
- });
+ firstValueFrom(
+ this.settings.update({ name: this.nameModel, defaultRole: this.roleModel }),
+ );
+ this.saving.set(false);
+ this.router.navigate(['/workspace']);
}
}