In Angular, services are a fundamental concept that allows you to share data, logic, and functions across different parts of your application. They help in keeping your code modular, reusable, and maintainable. This section will cover the basics of services, their purpose, and how to create and use them in an Angular application.

1. What is a Service?

   • A service is a class with a focused purpose. It is typically used to perform tasks such as fetching data from a server, validating user input, or logging application activity.
   • Services are a way to share data and functionality across components.

2. Why Use Services?

   • Separation of Concerns: Services help in separating business logic from the UI logic, making the code more modular and easier to maintain.
   • Reusability: Services can be reused across multiple components, reducing code duplication.
   • Testability: Services can be easily tested independently of the components that use them.

3. Dependency Injection (DI):

   • Angular uses Dependency Injection to provide services to components and other services. DI is a design pattern that allows a class to receive its dependencies from an external source rather than creating them itself.

To create a service in Angular, you can use the Angular CLI or manually create a service class. Here, we'll use the Angular CLI for simplicity.

1. Generate a Service:

   • Use the Angular CLI to generate a new service. Open your terminal and run the following command:

     ng generate service my-service
     

   • This command will create two files: my-service.service.ts and my-service.service.spec.ts (for testing).

2. Service Class:

   • The generated service class will look something like this:

     import { Injectable } from '@angular/core';
     
     @Injectable({
       providedIn: 'root',
     })
     export class MyService {
       constructor() { }
     }
     

   • The @Injectable decorator marks the class as a service that can be injected. The providedIn: 'root' metadata ensures that the service is available application-wide.

3. Adding Methods to the Service:

   • You can add methods to your service to perform specific tasks. For example, let's add a method to fetch data:

     import { Injectable } from '@angular/core';
     
     @Injectable({
       providedIn: 'root',
     })
     export class MyService {
       constructor() { }
     
       getData(): string {
         return 'Hello from MyService!';
       }
     }
     

To use the service in a component, you need to inject it into the component's constructor.

1. Inject the Service:

   • Open the component where you want to use the service and inject it into the constructor:

     import { Component, OnInit } from '@angular/core';
     import { MyService } from './my-service.service';
     
     @Component({
       selector: 'app-my-component',
       templateUrl: './my-component.component.html',
       styleUrls: ['./my-component.component.css']
     })
     export class MyComponent implements OnInit {
       data: string;
     
       constructor(private myService: MyService) { }
     
       ngOnInit(): void {
         this.data = this.myService.getData();
       }
     }
     

2. Use the Service:

   • Now, you can use the service's methods within your component. In this example, we call the getData method and store the result in a component property.

Let's create a simple example where a service fetches a list of users and displays them in a component.

1. Generate the Service:

   ng generate service user
   

2. Service Implementation:

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class UserService {
     constructor() { }
   
     getUsers(): string[] {
       return ['Alice', 'Bob', 'Charlie'];
     }
   }
   

3. Component Implementation:

   import { Component, OnInit } from '@angular/core';
   import { UserService } from './user.service';
   
   @Component({
     selector: 'app-user-list',
     template: `
       <ul>
         <li *ngFor="let user of users">{{ user }}</li>
       </ul>
     `,
     styleUrls: ['./user-list.component.css']
   })
   export class UserListComponent implements OnInit {
     users: string[];
   
     constructor(private userService: UserService) { }
   
     ngOnInit(): void {
       this.users = this.userService.getUsers();
     }
   }
   

Task: Create a service that provides a list of products and use it in a component to display the products.

1. Generate a service named ProductService.
2. Add a method getProducts that returns an array of product names.
3. Create a component named ProductListComponent.
4. Inject the ProductService into the component and use it to display the list of products.

Solution:

1. Generate the Service:

   ng generate service product
   

2. Service Implementation:

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class ProductService {
     constructor() { }
   
     getProducts(): string[] {
       return ['Product 1', 'Product 2', 'Product 3'];
     }
   }
   

3. Generate the Component:

   ng generate component product-list
   

4. Component Implementation:

   import { Component, OnInit } from '@angular/core';
   import { ProductService } from './product.service';
   
   @Component({
     selector: 'app-product-list',
     template: `
       <ul>
         <li *ngFor="let product of products">{{ product }}</li>
       </ul>
     `,
     styleUrls: ['./product-list.component.css']
   })
   export class ProductListComponent implements OnInit {
     products: string[];
   
     constructor(private productService: ProductService) { }
   
     ngOnInit(): void {
       this.products = this.productService.getProducts();
     }
   }
   

• Forgetting to Add @Injectable: Always ensure your service class is decorated with @Injectable to make it injectable.
• Not Providing the Service: If you forget to provide the service in the @Injectable decorator or in a module, Angular won't be able to inject it.
• Circular Dependencies: Be cautious of circular dependencies where two services depend on each other. This can lead to runtime errors.

In this section, you learned about the importance of services in Angular, how to create and use them, and how they help in maintaining a clean and modular codebase. Services are a powerful feature that allows you to share data and functionality across your application efficiently. In the next section, we will dive deeper into creating and using services with more advanced features like Dependency Injection and Hierarchical Injectors.