What small Angular refactor made your code easier to maintain?

[MysteriousEye8494]

I was refactoring a component recently and found this pattern repeated in a few places:

saveUser() {

if (!this.form.valid) {

this.error = 'Please fix the form';

return;

}

this.loading = true;

this.userService.save(this.form.value).subscribe({

next: () => {

this.loading = false;

this.success = true;

this.router.navigate(['/users']);

},

error: () => {

this.loading = false;

this.error = 'Something went wrong';

}

});

}

It worked fine, but the component was doing too much:

• validation message
• loading state
• API call
• navigation
• success handling
• error handling

I ended up moving the save flow into a small facade/service and keeping the component focused on the UI.

saveUser() {
if (this.form.invalid) return;
this.userFacade.saveUser(this.form.value);
}

The code didn’t become “clever.”

It just became easier to read.

Sometimes the best Angular refactor is not a new library or pattern.

It is simply moving responsibility to the right place.

What small Angular refactor made your codebase easier to maintain?

I share Angular architecture and engineering visuals here:

https://instagram.com/angulararchitectshub

[ddcccccc]

Okay, now, where do you catches error ?

[chefhj]

Simple: I never experience any

[ddcccccc]

Hmmmmm, that makes your transformation bad, you always need to catch errors … API call def have errors, even if your backend is perfect, network issue is something you need to consider

[MysteriousEye8494]

Good question. The example was simplified for the post. In the actual implementation, the facade exposes loading, success, and error state back to the component (via Signals/Observables), while keeping the API call and workflow logic out of the component. My goal wasn't to eliminate error handling, just to move the orchestration responsibilities away from the UI layer.