How to setup and create services?
Before starting to create a service, you just need to set up a dev environment.
Install Node.js and npm if they are not already on your machine.
Then install the Angular CLI globally.
npm install -g @angular/cli
Angular CLI tool will allow you to easily and quickly generate services, components, pipes, and many more files for your project.
Now, create a new project using the CLI command -
ng new MyProject
And go to your created project directory and launch the server.
ng serve --open
Now come to service - execute below the command for generating service class.
ng g service MyService
It will create the two files in the folder - src/app/
1. my-service.service.spec.ts
2. my-service.service.ts
Now, import my service file into the angular module - app.module.ts file. It looks like this.
import { AppComponent } from './app.component';
import {MyService} from './my-service.service';//Import Service
//AppModule class with @NgModule decorator
@NgModule({
//Static, This is the compiler configuration
//declarations is used for configure the selectors.
declarations: [
AppComponent
],
//Composability and Grouping
//imports used for composing NgModules together.
imports: [
BrowserModule
],
//Runtime or injector configuration
//providers is used for runtime injector configuration.
providers: [MyService],
//bootstrapped entry component
bootstrap: [AppComponent]
})
export class AppModule { }
And let’s see the created service class -my-service.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
}
Now you need to create service methods to get, post, put, and delete the users.
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
//I’m using the static data
//You can also fetch the data using HttpClient service for backend APIs.
users = [
{ "id": 1, "name": "Anil Singh", 'age' :32 },
{ "id": 2, "name": "Aradhya" , 'age' :32},
{ "id": 3, "name": "Reena Singh" , 'age' :32}
]
/* (method) MyService.getUsers(): {
"id": number;
"name": string;
'age': number;
}[] */
getUsers(){
return this.users;
}
}
Now, use this service in the user component for display on UI - my-user.component.ts
import { Component, OnInit } from '@angular/core';
import {MyService} from '../my-service.service';
@Component({
selector: 'app-my-user',
templateUrl: './my-user.component.html',
styleUrls: ['./my-user.component.css']
})
export class MyUserComponent implements OnInit {
userList =[];
constructor(private service :MyService) {
//Get the user list by using the my service.
this.userList = service.getUsers();
}
ngOnInit() { }
}
And my-user.component.html
<h4>User List -</h4>
<table border="1">
<tr>
<th>ID</th><th>Name</th><th>Age</th>
</tr>
<tr *ngFor="let user of userList">
<td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.Age}}</td>
</tr>
</table>
Finally, you got the user list on your components HTML.