Introduction to Services in Angular

Services in Angular are used to share data, logic, and functionality across different components in your application. This tutorial covers the basics of creating and using services effectively in your Angular applications.

Setting Up a Service

To set up a service, you need to create a service file and use the @Injectable decorator:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my.service';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule],
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getMessage(): string {
    return 'Hello from MyService!';
  }
}

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from '../my.service';

@Component({
  selector: 'app-home',
  template: '
{{ message }}
',
})
export class HomeComponent implements OnInit {
  message: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.message = this.myService.getMessage();
  }
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Creating a Service

Create a service using the Angular CLI command ng generate service my and add your logic to the service class:

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getMessage(): string {
    return 'Hello from MyService!';
  }
}

Using a Service in a Component

Inject the service into your component's constructor and use it in the component's logic:

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from '../my.service';

@Component({
  selector: 'app-home',
  template: '
{{ message }}
',
})
export class HomeComponent implements OnInit {
  message: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.message = this.myService.getMessage();
  }
}

Providing Services

Services can be provided at the root level or in specific modules. Using providedIn: 'root' ensures that the service is a singleton and available application-wide:

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getMessage(): string {
    return 'Hello from MyService!';
  }
}

Key Points

Conclusion

Services in Angular provide a powerful way to share data and logic across your application. By understanding and using services effectively, you can create modular and maintainable code. Happy coding!