Non-singleton service in Standalone component – Angular

The Problem:

Create a non-singleton service in a standalone Angular component, such that each instance of the component has its own unique instance of the service.

The Solutions:

Solution 1: Define and provide non-singleton service

To create a non-singleton service in a standalone component, you can define a regular injectable class and provide it to the component explicitly. Here’s how you can do it:

1. Define the service class

@Injectable()
export class TestService {
    // Your implementation goes here
}

2. Provide the service to the component

Configure the standalone component to provide the service using the providers metadata property.

@Component({
    selector: 'app-test',
    templateUrl: 'test.component.html',
    styleUrls: ['test.component.css'],
    standalone: true,
    providers: [TestService],
})
export class TestComponent {...}

This approach ensures that each instance of the standalone component will have its own instance of the service, making it non-singleton.

Solution 2: Using @Self

To create a non-singleton service in a standalone component, follow these steps:

1. Define your service class.

2. In the standalone component, list your service as a provider.

3. Use the @Self decorator in the component constructor to inject an instance of the service specific to that component.

Example Code:

class Service {
  value = Math.random();
}


@Component({
  selector: 'child',
  standalone: true,
  template: `<div>{{service.value}}</div>`,
  providers: [Service]
})
class ChildComponent {
  constructor(@Self() protected service: Service) {}
}

Using @Self ensures that you get an instance of the service specific to the component, even if the service is defined as a singleton in the root injector.

Video Explanation:

The following video, titled "”[Debugging", provides additional insights and in-depth exploration related to the topics discussed in this post.

This video provides further insights and detailed explanations related to the content discussed in the article.

NullInjectorError: No provider for {Class}! – YouTube” description=”… has changed after it was checked. Angular•167K views · 57:05. Go to channel · Angular component testing – Overcoming the hurdles. Oasis Digital• …”]