How to Create Service in Angular 10?

This post will give you example of angular 10 create service example. let’s discuss about how to create service in angular 10 using cli. let’s discuss about how to create service in angular 10. you can understand a concept of how to create data service in angular 10.

There are set of commands provided by angular 10 application. one from there, we will use that command to creating service in angular 10 application.

As we know, service class will help to getting data using api. in angular service we call api and get data from that api. service will easy to available for getting data on angular application. Right now i will give you very simple example without any api, but if you want to know how works service with api then you can follow this tutorial: Angular 10 HttpClient with service example.

Create Service

Here, we will create simple service using cli command. in service file we will create getPosts() and we will return array.

Let's run bellow command to create Post Service:

ng g service Post

Now you can see there is a created post.service.ts file. you can update like as bellow file:

src/app/post.service.ts

import { Injectable } from '@angular/core';
  
@Injectable({
  providedIn: 'root'
})
export class PostService {
  
  constructor() { }
  
  getPosts(){
    return [
      {
        id: 1,
        title: 'Angular 10 Http Post Request Example'
      },
      {
        id: 2,
        title: 'Angular 10 Routing and Nested Routing Tutorial With Example'
      },
      {
        id: 3,
        title: 'How to Create Custom Validators in Angular 10?'
      },
      {
        id: 4,
        title: 'How to Create New Component in Angular 10?'
      }
    ];
  }
}

Use Service in Component

Here, we will just use that service in our component file and assign to post variable. So let's updated following file:

src/app/app.component.ts

import { Component } from '@angular/core';
import { PostService } from './post.service';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appNewService';
  posts = [];
  
  constructor(private postService: PostService){
    this.posts = postService.getPosts();
  }
}

View File

Now we will display our data in view file like as bellow:

src/app/app.component.html

<h1>How to create service in angular 10 using cli - ItSolutionStuff.com</h1>
<ul>
  <li *ngFor="let post of posts">
    <strong>{{ post.id }})</strong>{{ post.title }}
  </li>
</ul>

Now you can run your application by using following command:

ng serve

You can see layout as like bellow screen shot:

I hope it can help you...