generic.resolver.ts

resolve(route: ActivatedRouteSnapshot): Observable<T> | Promise<T> | T {
    return this.list.get(route.paramMap.get('id'))
        .pipe(catchError((err: HttpErrorResponse) => {
            if (err.status === 404) {
                this.flashes.danger('Élément non trouvé', 'L\'élément que vous cherchez n\'exsite pas.');
                this.router.navigate([this.redirectTo]);

                return EMPTY;
            }

            if (err.status === 500) {
                this.flashes.danger('Erreur serveur', err.error.message);
                this.router.navigate([this.redirectTo]);

                return EMPTY;
            }

            return throwError(err);
        })) as Observable<T> | Promise<T> | T;
}

list.component.ts

export class ListComponent extends GenericListSubComponent<Contract> {
    objects$: Observable<PaginatedResult<Contract>>;

    edit(contract: Contract): void {
        const modal = this.modalService.open(EditComponent);
        modal.componentInstance.object = SpreadRecursive.clone(contract);
        modal.componentInstance.parent = SpreadRecursive.clone(this.route.parent.parent.snapshot.data.object);
        modal.result
            .then(() => this.updateList(this._page, this._per_page, this._sort, this._filters))
            .catch(() => {});
    }

    constructor(
        protected service: IndustrialContractListService,
        protected route: ActivatedRoute,
        protected router: Router,
        protected flashes: FlashMessagesService,
        protected modalService: NgbModal,
    ) {
        super(service, route, router, flashes);
        this.parent = this.route.parent.parent.snapshot.data.object;
    }

list.template.html

<ng-container *ngIf="objects$|async as contratcs">
  <div *ngFor="let contract of contracts._embedded.items">
    <button (click)="edit(contract)"></button>
  </div>
</ng-container>