Creating and Using Services in Angular

Generate Service: Use the Angular CLI command ng generate service serviceName or its shorthand ng g s serviceName to generate a new service.

Service Class: This is a TypeScript class that carries any shape and functionality you would like to replicate in your application.

It could be composed of fetching data from APIs, math computations, or business code execution.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData(): string {
    return 'Data from the DataService';
  }
}

                          
                        

Injectable Decorator: Services are decorated with @Injectable(), which allows Angular to inject dependencies into the service.

Using the Service: You can inject the service into components, directives, or other services using constructor injection.

                          
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: '
{{ data }}
',
})
export class ExampleComponent {
  data: string;

  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }
}

                          
                        

Dependency Injection: Providing and Injecting Dependencies

Dependencies injection pattern* is a design approach that components and services dependencies are created from an external source instead of building them up themselves.

While in Angular the system of providers and injector is implemented by the Angular Dependency Injection system, Angular 2 shifted to a framework with a better code structure and better tooling.

• Providing Dependencies: A dependencies are injected using the providers array set at the module level using the @NgModule decorator, or they can be provided at the component level using the providers array in the @Component decorator.

                          
import { NgModule } from '@angular/core';
import { DataService } from './data.service';

@NgModule({
  providers: [DataService]
})
export class AppModule { }

                          
                        

Injecting Dependencies: Dependencies are injected into components, directives, or other services using constructor injection.

Angular's dependency injection system takes care of resolving and providing the necessary dependencies at runtime.

                          
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  template: '<p>{{ data }}</p>',
})
export class ExampleComponent {
  data: string;

  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }
}