Angular Services and Providers

1. Introduction

In Angular, services and providers are crucial for sharing data and logic across components. This lesson covers the fundamentals of services, providers, and their implementation in Angular applications.

2. What are Services?

Services in Angular are singleton objects that encapsulate business logic or data access. They are typically used to fetch data from APIs or manage application state.

3. What are Providers?

Providers are a way to tell Angular how to create a service. They define how a service is instantiated and can be configured to provide different behaviors.

4. Creating Services

To create a service in Angular, you can use the Angular CLI:

ng generate service my-service

Example Service

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

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private data: string[] = [];

  addData(item: string): void {
    this.data.push(item);
  }

  getData(): string[] {
    return this.data;
  }
}

5. Injecting Services

To use a service in a component, you inject it through the constructor:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  constructor(private myService: MyService) {}

  addItem(item: string) {
    this.myService.addData(item);
  }

  getItems() {
    return this.myService.getData();
  }
}

6. Best Practices

• Always use the `providedIn` property for tree-shakable services.
• Keep services focused on a single responsibility.
• Use `@Injectable` decorator to enable dependency injection.

7. FAQ