Http call is running in loop when using sync in template

I have a problem and I'm looking for a solution. In a standalone component (Angular 19) with OnPush detection in the template I want to read data from observable:

@Component({
selector: 'app-profile',
imports: [AsyncPipe],
template: `
@let userData = oidcService.getUserData() | async;
@let apiUserData = usersService.usersGet(userData.sub) | async;
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileComponent {
public readonly oidcService = inject(OidcSecurityService);
public readonly usersService = inject(UsersService);
}


UsersService:

@Injectable({
providedIn: 'root',
})
export class UsersService {
private readonly urlBase = `${environment.apiUrl}/users`;
private readonly httpClient = inject(HttpClient);

public usersGet(id: string): Observable<UserEntity> {
return this.httpClient.get<UserEntity>(`${this.urlBase}/${id}`);
}
}



The problem is that apiUserData gets into a loop of calls instead of asking only once. userData works fine, but it returns data from the service without http. Why does this happen?

Continue reading...