Serviços em Angular

Em Angular, um serviço é uma classe que oferece funcionalidades reutilizáveis para toda a aplicação. Os serviços são usados para compartilhar dados e lógica entre componentes e outros serviços.

Para criar um serviço em um módulo Angular, é preciso definir a classe do serviço em seu próprio arquivo TypeScript. Por exemplo, considere o seguinte serviço simples que fornece uma lista de produtos:

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

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

    getProducts() {
        return this.products;
        }
    }

Nesse exemplo, estamos definindo um serviço chamado ProductService que fornece uma lista de produtos. A classe é definida com o decorator @Injectable e configurado com a opção providedIn: 'root', que faz com que o Angular crie uma única instância desse serviço em toda a aplicação. O serviço possui um método getProducts que retorna a lista de produtos.

Para usar esse serviço em um componente, é preciso importá-lo e injetá-lo no construtor do componente. Por exemplo:

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

    @Component({
        selector: 'app-product-list',
        template: `
            <h2gt;Lista de produtos</h2gt;
            <ulgt;
                <li *ngFor="let product of products">{{ product.name }} - R$ {{ product.price }}</ligt;
            </ulgt;
`
    })
    export class ProductListComponent {
        products;

        constructor(private productService: ProductService) {
            this.products = this.productService.getProducts();
        }
    }

Nesse exemplo, estamos importando o serviço ProductService e injetando-o no construtor do componente ProductListComponent. O componente usa o método getProducts do serviço para obter a lista de produtos e exibí-la na template usando a diretiva *ngFor.