reload component in Angular 19 with signals

My reload component:

import {ChangeDetectionStrategy, Component, input, output, resource} from '@angular/core';
import {ErrorService} from "../error.service";

@Component({
selector: 'a50-reload',
imports: [],
template: '<button (click)="doReload()">reload</button>',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ReloadComponent {
trigger = input.required();
reload = output<void>();

constructor(private errorService: ErrorService) {
}

reloadResource = resource({
request: this.trigger,
loader: async (param) => this.doReload()
});

doReload() {
this.errorService.deleteAll();
this.reload.emit();
}
}

<button (click)="doReload()">reload</button>


Usage:

<a50-reload [trigger]="someSignal()" (reload)="load()"></a50-reload>


So I have a custom reload button which I can include in any component. On component initialization, the load function is called automatically and on every klick on the reload button. Also if the parent component is called from the router, trigger ensures, that a reload is made by changing the route. If this is not the case, you can write

<a50-reload trigger (reload)="load()"></a50-reload>


but trigger cannot be omitted.

It works, but it looks a little bit clumsy. Is there a more straightforward solution?

Continue reading...