make service in angular 8

How to Make a Service in Angular 8

Angular 8 is a powerful framework for building web applications. One of its key features is the ability to create reusable services that can be shared across different components. In this tutorial, I'll show you how to create a service in Angular 8.

Step 1: Generate a New Service

To create a new service in Angular 8, you can use the following command:

ng generate service my-service

This will generate a new service called "my-service" in your project. You can find the file for this service in the "src/app" directory.

Step 2: Add Your Service Logic

Once you've generated your new service, you'll need to add your service logic to the file. This is where you can define functions and variables that can be used by other components in your application.

For example, let's say you want to create a service that provides a list of products. You could define your service like this:

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

    @Injectable({
      providedIn: 'root'
    })
    export class ProductService {
      products = [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
      ];

      getProducts() {
        return this.products;
      }
    }
  

In this example, we've defined a ProductService class that has an array of products and a function called getProducts() that returns the products array. We've also added the @Injectable decorator to our class to indicate that it can be injected into other components.

Step 3: Inject Your Service

Now that you've defined your service, you can inject it into other components in your application. To do this, you'll need to import your service and add it to the providers array in your component's @Component decorator.

    import { Component } from '@angular/core';
    import { ProductService } from './product.service';

    @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.css'],
      providers: [ProductService]
    })
    export class ProductListComponent {
      products;

      constructor(private productService: ProductService) { }

      ngOnInit() {
        this.products = this.productService.getProducts();
      }
    }
  

In this example, we've defined a ProductListComponent that injects a ProductService instance into its constructor. We've also added ProductService to the providers array in our @Component decorator to make it available for injection.

Finally, we've added a ngOnInit function to our component that calls the getProducts() function on our ProductService instance and assigns the result to the products variable.

Conclusion

That's it! You've just created a new service in Angular 8 and injected it into a component. Services are a powerful way to create reusable logic in your application and are a key feature of the Angular framework.