Can resource or rxResource be initialized through function or activated through button click

All you need to do is the provide the Injector DI element to the resource or rxResource and it will work fine.

You need to provide Injector in all places, except the below scenarios:

1. Declaring at the root of the component class.
2. Declaring inside the constructor.

Because the injector is available inside and the resource API can access it directly.

export class App { ... injector = inject(Injector); // <- getting injector from DI! getUsers() { this.rxResource = rxResource({ loader: () => { return this.http .get(`https://jsonplaceholder.typicode.com/todos`) .pipe(map((data: any) => data.slice(0, 10))); }, injector: this.injector, // <- provide injector here! }); this.resource = resource({ loader: ({ abortSignal }) => { return fetch(`https://jsonplaceholder.typicode.com/todos/`, { signal: abortSignal, }) .then((res: any) => res.json()) .then((res: any) => { return res.slice(0, 10); }); }, injector: this.injector, // <- provide injector here! }); } 

Full Code:

import { Component, inject, ResourceRef, ResourceStatus, Injector, resource, } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { rxResource } from '@angular/core/rxjs-interop'; import { HttpClient, provideHttpClient } from '@angular/common/http'; import { CommonModule } from '@angular/common'; import { map } from 'rxjs'; @Component({ selector: 'app-root', imports: [CommonModule], template: ` <div> @if(rxResource) { @if(![rs.Loading, rs.Reloading].includes(rxResource.status())) { {{rxResource.value() | json}} } @else{ Loading... } } </div> <hr/> <div> @if(resource) { @if(![rs.Loading, rs.Reloading].includes(resource.status())) { {{resource.value() | json}} } @else{ Loading... } } </div> <hr/> <div> <button (click)="getUsers()">Get Users</button> <button (click)="reset()">Reset</button> </div> `, }) export class App { rs = ResourceStatus; http = inject(HttpClient); resource!: ResourceRef<any>; rxResource!: ResourceRef<any>; injector = inject(Injector); getUsers() { this.rxResource = rxResource({ loader: () => { return this.http .get(`https://jsonplaceholder.typicode.com/todos`) .pipe(map((data: any) => data.slice(0, 10))); }, injector: this.injector, }); this.resource = resource({ loader: ({ abortSignal }) => { return fetch(`https://jsonplaceholder.typicode.com/todos/`, { signal: abortSignal, }) .then((res: any) => res.json()) .then((res: any) => { return res.slice(0, 10); }); }, injector: this.injector, }); } reset() { if (this.resource) { this.resource.destroy(); } if (this.rxResource) { this.rxResource.destroy(); } } } bootstrapApplication(App, { providers: [provideHttpClient()], }); 

Stackblitz Demo