Angular Services

Services

In Angular, services are special classes that help you

Share data across multiple components

Keep your code organized

Reuse logic and functions

Services act like a central toolbox for your application. They are singleton objects, which means theres only one instance running in your app keeping data consistent everywhere.

Why Services Matter

Code Reusability

Write your logic once, then use it in different parts of your app.

Data Sharing

Services help different components talk to each other and share data easily.

Dependency Injection

Angular can automatically add your service wherever it’s needed.

Handling Async Operations

Great for API calls, working with timers, or events.

Example: Crating and Using a Service in Angular

Step 1: Create a New Angular Project

ng new service-example

Step 2: Create a Service

ng g service services/userdata

Step 3: Add Logic to the Service

Edit userdata.service.ts

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

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

  users() {
    return [
      { id: '1', name: "John", age: 25, gender: "male" },
      { id: '2', name: "Jane", age: 30, gender: "female" }
    ];
  }
}

Now your service has a method to return user data.

Step 4: Create a Footer Component

ng g c footer

Step 5: Use the Service in Footer Component

footer.component.ts

import { Component } from '@angular/core';
import { UserdataService } from '../services/userdata.service';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent {
  users: any;

  constructor(private userData: UserdataService) {
    this.users = userData.users();
  }
}

footer.component.html

<div class="footer">
    <h1>Footer</h1>
    <ul>
        <li *ngFor="let user of users">
            {{user.name}}: {{user.age}}
        </li>
    </ul>
</div>

footer.component.css

.footer {
  background-color: blueviolet;
  color: #fff;
  bottom: 0;
  width: 99%;
  padding: 5px;
  position: absolute;
}

Step 6: Also Use the Service in App Component

app.component.ts

import { Component } from '@angular/core';
import { UserdataService } from './services/userdata.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Service-Example';
  users: any;

  constructor(private userData: UserdataService) {
    this.users = userData.users();
  }
}

app.component.html

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let user of users">
        {{user.name}}
    </li>
</ul>

<app-footer></app-footer>

Step 7: Register the Service

Edit app.module.ts (if needed)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FooterComponent } from './footer/footer.component';

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

Since providedIn: 'root' is used, Angular will automatically provide the service.

Step 8: Run the App

ng serve

Go to http://localhost:4200

You will see user data in the content area and also in the footer both fetched from the same service.