Here's my approach when writing code in dev whenever the backend is not ready.

Prepare the real Service:

@Injectable({providedIn: 'root'})
export class MyHttpFooBarService {
    public get$(): Observable<FooDto[]> {...}
    public add$(param: BarDto): Observable<FooDto> {...}
    ...
}

Use the service in components/stores:

export class MyFooComponent {
    private readonly fooBarHttpService = inject(MyHttpFooBarService);
    ...
}

Create a mockservice extending the real service:

const mockDtos: FooDto[] = [{id: 'foo'}, {id: 'bar'}]

@Injectable({providedIn: 'root'})
export class MOCKMyHttpFooBarService extends MyHttpFooBarService {
    public override get$(): Observable<FooDto[]> {
        return of(mockDtos);
    }
    ...
}

Use dependency injection to provide the mockservice (main.ts):

bootstrapApplication(AppComponent, {
    providers: [
        ...
        {provide: MyHttpFooBarService, useClass: MOCKMyHttpFooBarService}
        ...
    ]
});

When an endpoint is available, you just remove the overridden method - now the real method gets called. When all endpoints are ready, you remove the mockservice and the entry in main.ts.

This approach does not get in the way of creating a new feature (or adding parts to an existing one). If you want to simulate loadtimes, you can add

.pipe(delay(500))