Introduction To Angular Services
In this article, we will learn how to make a simple component that gets a list of items from an Angular Service and shows it in our template. A Service is a type of class that provides a service to a component, directive, or another service. The Service could be retrieving data from the back end, executing business logic, and so on.
What is Angular Service
A service is a reusable piece of code with a specific purpose. You will use this code in a lot of different parts of your program.
Our components require data access. You can put data access code in each component, but this is wasteful and violates the single-responsibility principle. The focus of the Component should be on displaying data to the user. Data collection from the back-end server must be assigned to another class. A class like this is known as a Service class. Because it serves as a data provider for all components that require it.
What Angular Services are used for
- Logging services, for example, are features that are not dependent on other components.
- Logic or data can be shared between components.
- External interactions, such as data access, should be encapsulated.
Advantageous of Angular Service
- It is simpler to test services.
- They are less difficult to debug.
- We can use the service in a variety of settings.
How to create a Service in Angular
A Javascript function is all that an Angular service is. All we have to do now is construct a class and populate it with methods and properties. We can then call the methods of this class by creating an instance of it in our component.
Getting data from a data source is one of the best uses of services. Let's construct a basic service that retrieves product information and sends it to our component.
Product Model
Create a new file called product.ts in the src/app folder.
export class Product { constructor(productID:number, name: string , price:number) { this.productID=productID; this.name=name; this.price=price; } productID:number ; name: string ; price:number; }
Product Angular Service
import {Product} from './product' export class ProductService{ public getProducts() { let products:Product[]; products=[ new Product(1,'Memory Card',500), new Product(1,'Pen Drive',750), new Product(1,'Power Bank',100) ] return products; } }
Invoking the ProductService
import { Component } from '@angular/core'; import { ProductService } from './product.service'; import { Product } from './product'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { products:Product[]; productService; constructor(){ this.productService=new ProductService(); } getProducts() { this.products=this.productService.getProducts(); } }
Template
<div class="container"> <h1 class="heading"><strong>Services </strong>Demo</h1> <button type="button" (click)="getProducts()">Get Products</button> <div class='table-responsive'> <table class='table'> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr *ngFor="let product of products;"> <td>{{product.productID}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> </tbody> </table> </div> </div>
Injecting Services into Component
this.productService=new ProductService();