Angular Services

What is an Angular Service?

Service is a piece of reusable code with a focused purpose. A code that you will use in many components across your application

Our components need to access the data. You can write data access code in each component, but that is very inefficient and breaks the rule of single responsibility. The Component must focus on presenting data to the user. The task of getting data from the back-end server must be delegated to some other class. We call such a class a Service class. Because it provides the service of providing data to every component that needs it.

What Angular Services are used for

Features that are independent of components such a logging services
Share logic or data across components
Encapsulate external interactions like data access

Advantages of Angular Service

Services are easier to test.
They are easier to Debug.
We can reuse the service at many places.

How to create a Service in Angular?

An Angular service is simply a Javascript function. All we need to do is to create a class and add methods & properties. We can then create an instance of this class in our component and call its methods.

Step 1

Create a new file under the folder src/app and call it User.ts

export interface User {
    id: number,
    name: string,
    email: string,
    mobile: string,
    gender: string,
    dob: Date,
    isActive: boolean,
    range?: any,
    userType?: string,
    rating:number
}

Step 2

Next, let us build an Angular Service, which returns the list of users.

Create a new file under the folder src/app and call it user.service.ts with the help of Angular CLI. Type the below mentioned command and this command will generate the service for us.

ng g s service/user

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

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

Step 3

Now add the below mentioned methods to perform CRUD operation

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
    private userList: User[] = [{
        id: 1,
        name: 'Ankush Agnihotri',
        dob: new Date('08/31/1992'),
        email: '[email protected]',
        gender: 'Male',
        mobile: '9041627385',
        isActive: true,
        range: [0, 10],
        rating:4,
        userType: 'Admin'
    }];
    constructor() {}
    getUsers() {
        return this.userList
    }
    getUsersByID(id: number) {
        return this.userList.find(x => x.id == id)
    }
    addUser(user: User) {
        user.id = new Date().getTime();
        this.userList.push(user);
    }
    updateUser(user: User) {
        const userIndex = this.userList.findIndex(x => x.id == user.id);
        if (userIndex != null && userIndex != undefined) {
            this.userList[userIndex] = user;
        }
    }
    removeUser(id: number) {
        this.userList = this.userList.filter(x => x.id != id);
    }
}

Invoking the UserService

We start with importing User model & UserService in userlist component

We create an instance of UserSerivce in the constructor of the UserListComponet.

The getUsers method calls the getUsers method of the UserService. It returns a list of Users, which we store in the local variable userList

import { Component, OnInit } from '@angular/core';
import { UserService } from '../service/user.service';
import { User } from '../User';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  userList: User[] = [];
  constructor(private userService: UserService) {}
  ngOnInit(): void {
  }
  getUsers() {
   // Get Users from UserService
   this.userList = this.userService.getUsers();
  }
}

Template

The next step is to display the User list in table

Open the userlist.component.html file and write code for it

<div class="container">
    <h1 class="heading"><strong>Services </strong>Demo</h1>
    <button type="button" (click)="getUsers()">Get Users</button>
     <div class='table-responsive'>
            <table class='table'>
                <thead>
                    <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>DOB</th>
                <th>isActive</th>
                <th>Action</th>
            </tr>
                </thead>
                <tbody> 
                   <tr *ngFor="let user of userList;">
                     <td>{{user.name}}</td>
                     <td>{{user.email}}</td>
                     <td>{{user.mobile}}</td>
                     <td>{{user.dob | date:'d/M/yyyy'}}</td>
                     <td>{{user.isActive}}</td> 
                  </tr>
                </tbody>
            </table>
        </div>
</div>