Singleton Services in Angular Tutorial 🎯

Welcome back to CodeYourCraft! Today, we're diving into the fascinating world of Singleton Services in Angular. By the end of this lesson, you'll be able to create and use Singleton Services in your own projects.

What are Singleton Services? 📝

In Angular, a Singleton Service is a service that provides a single instance for an entire application. Once created, it stays in memory for the lifetime of the application.

Singleton Services are useful when you have a resource that requires a single, shared instance across your application.

Why Singleton Services? 💡

Singleton Services are useful for several reasons:

They help in maintaining state across components and services.
They reduce memory footprint by avoiding unnecessary object creation.
They allow for a centralized management of application data.

Creating a Singleton Service 🎯

To create a Singleton Service, follow these steps:

Use the @Singleton() decorator from the @ngneat/singleton package.

typescript

import { inject, Singleton } from '@ngneat/singleton';

@Singleton()
export class MySingletonService {
  constructor(@inject('DependencyName') private dependency: any) {}

  // Service methods here
}

In the above example, MySingletonService is a Singleton Service that accepts a dependency via the @inject() decorator.

typescript

import { NgModule } from '@angular/core';
import { MySingletonService } from './my-singleton.service';

@NgModule({
  providers: [MySingletonService],
})
export class AppModule {}

Now, you can inject MySingletonService into any component or service that needs it.

Using a Singleton Service 🎯

To use a Singleton Service, follow these steps:

Inject the service into a component or service.

typescript

import { Component } from '@angular/core';
import { MySingletonService } from './my-singleton.service';

@Component({
  selector: 'app-root',
  template: `
    <p>{{ service.message }}</p>
  `,
})
export class AppComponent {
  constructor(private service: MySingletonService) {}
}

In the above example, we've injected MySingletonService into AppComponent and accessed its message property.

Modify the service's properties from any component or service.

typescript

import { Component } from '@angular/core';
import { MySingletonService } from './my-singleton.service';

@Component({
  selector: 'app-another-component',
  template: `
    <button (click)="setMessage()">Change Message</button>
  `,
})
export class AnotherComponent {
  constructor(private service: MySingletonService) {}

  setMessage() {
    this.service.message = 'New Message';
  }
}

In the above example, we've created AnotherComponent that changes MySingletonService's message property when the button is clicked.

Quiz Time! 🎯

Wrapping Up 🎯

And that's it! You've learned how to create and use Singleton Services in Angular. With Singleton Services, you can maintain state across components, reduce memory footprint, and centralize application data management.

Happy coding, and see you in the next lesson! 💡📝✅