What are Angular services and how are they used?

Angular services are singleton (single-instance) objects that are used to organize and share data or functions across different components, directives, or other services within an Angular application. They promote code reusability, modularity, and separation of concerns. By applying dependency injection, Angular makes it easy to provide these services to components or other services that need them.

Services in Angular are plain TypeScript classes that are annotated with the ‘@Injectable()‘ decorator. The ‘@Injectable()‘ decorator is used to define metadata for dependency injection and marks a class as available to be provided and injected as a dependency by other classes.

To create a service, you should follow these steps:

1. **Import the ‘Injectable‘ decorator**: Import the ‘Injectable‘ decorator from the ‘@angular/core‘ module.

import { Injectable } from '@angular/core';

2. **Create a service class**: Create a TypeScript class that will represent your service. Define the methods and properties your service will provide.

export class ExampleService {
  private exampleData: string[] = ['Item 1', 'Item 2', 'Item 3'];

  getExampleData(): string[] {
    return this.exampleData;
  }

  addExampleData(item: string): void {
    this.exampleData.push(item);
  }
}

3. **Add the ‘@Injectable()‘ decorator**: Add the ‘@Injectable()‘ decorator to your service class. This tells Angular that this class should be treated as a service and be made available for injection.

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  // ...
}

Now that you have created a service, you can use it in different components or other services in your Angular application by following these steps:

1. **Import the service**: Import the service you created in the component or the service where you want to use it.

import { ExampleService } from './example.service';

2. **Add a dependency**: Add a constructor argument with the service type in your component or service to tell Angular to inject the service.

constructor(private exampleService: ExampleService) { }

3. **Use the service**: Now you can use the injected service’s methods or properties in your component or other service.

ngOnInit(): void {
  this.data = this.exampleService.getExampleData();
}

addData(item: string): void {
  this.exampleService.addExampleData(item);
}

Here’s an example of how an Angular service is used within a component:

import { Component, OnInit } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example-component',
  template: `
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
    <button (click)="addData('New Item')">Add Item</button>
  `,
})
export class ExampleComponent implements OnInit {
  data: string[];

  constructor(private exampleService: ExampleService) { }

  ngOnInit(): void {
    this.data = this.exampleService.getExampleData();
  }

  addData(item: string): void {
    this.exampleService.addExampleData(item);
  }
}

In summary, Angular services are an essential part of application development for organizing and sharing functionality across the application. They help in structuring the codebase in a modular and maintainable way, and they are easily injectable into components and other services through Angular’s dependency injection system.