I have signals in the service, I want to expose these signals to components (without using...

I have this scenario, My service holds few signals (They are use by resource API's to reactively fetch data and also show at the UI level)

My requirement is that I want to expose these values to the User in the component HTML.

My challenges are:

1. 
   I generally use a getter and setter, to provide these properties from a service (Private - not accessible in HTML).
   
   
2. 
   I do not want to use a computed here because, there is no actual computation happening, I just need the service signal reference, this scenario definitely does not get classified as a derived state, it is just a reference to a signal from the service.
   
   
3. 
   I do not want to make my service public, I want to expose certain elements alone, I would keep the extra elements as private, but using service in HTML is not an option for me.
   

These are my requirements, below is my minimal reproducible code:

Service:


@Injectable({
providedIn: 'root',
})
export class SomeService {
http = inject(HttpClient);
serviceIdSignal: WritableSignal<number> = signal(0);

rxResource = rxResource({
request: () => this.serviceIdSignal(),
loader: ({ request: id }) => {
return this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);
},
});

resource = resource({
request: () => this.serviceIdSignal(),
loader: ({ request: id, abortSignal }) => {
return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
signal: abortSignal,
}).then((r) => r.json());
},
});
}

Component:


@Component({
selector: 'app-root',
imports: [JsonPipe],
template: `
<hr/>
{{someService.serviceIdSignal()}}
<hr/>
@if(someService.rxResource.status() === rs.Resolved) {
{{someService.rxResource.value() | json}}
} @else {
Loading...
}
<hr/>
@if(someService.rxResource.status() === rs.Resolved) {
{{someService.resource.value() | json}}
} @else {
Loading...
}
`,
})
export class App {
rs = ResourceStatus;
private someService = inject(SomeService);
}


Below is the error I am getting:

✘ [ERROR] NG1: Property 'someService' is private and only accessible within class 'App'. [plugin angular-compiler]

src/main.ts:56:12:
56 │ {{someService.resource.value() | json}}
╵ ~~~~~~~~~~~​

Stackblitz Demo

Continue reading...