Angular Services Implementation

In the previous article, we’ve learned about Angular service basics and their needs in our application. In this article, we’ll learn how to use the service in your application and the different steps we should follow.

How to Use Angular Services?

In the previous article, we’ve also learned how to generate service and the command for that. Now we’re ready to use Angular services.

To use the service, follow the steps mentioned below.

Step 1: Create a Service

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

@Injectable({
  providedIn: 'root'
})

export class StudentService {

  constructor() { }

  getStudents() {
    return [
      {id:100, name:"Rahul", Gender:"Male", age:20},
      {id:101, name:"Anish", Gender:"Male", age:20},
      {id:102, name:"Manju", Gender:"Female", age:20},
      {id:103, name:"Rohan", Gender:"Male", age:20},
      {id:104, name:"Pratima", Gender:"Female", age:20},
    ]
  }
}

We’ve created a getStudents() method that returns an array of objects consisting of the student details.

NOTE: Here, we’ve used hardcoded data, but in fact, we’ll fetch data from a web server.

Step 2: Register the service in AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentService } from './student.service';

@NgModule({

  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [StudentService],
  bootstrap: [AppComponent]
})

export class AppModule { }

Include StudentService in the providers array and also import it.

Step 3: Declare the dependency in the component in which you want to use the data

import { Component } from '@angular/core';
import { StudentService } from './student.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  students:any

  constructor(private studentservice:StudentService){}

  ngOnInit(){
   this.students=this.studentservice.getStudents();
  }
}
  • Declare the service inside the constructor and also import it.
  • Now inside the ngOnInit() method, fetch the required data using the StudentService instance and store it in the empty array.

Now using ngFor directives, we’re displaying the name and id into the browser.

<ul *ngFor="let student of students">
  <li>Id: {{student.id}}  Name:{{student.name}}</li>
</ul>

Output:

angular service example

Conclusion

We hope this article has cleared your concepts on using a service. We’ve also learned how to fetch data and display it in the browser. It plays a major role in our application to share data in multiple components when needed. In the later articles, we’ll also be learning how to fetch data from a web server and use it in your app.

Read Next: Angular HTTP & Observables

Leave a Reply

Your email address will not be published. Required fields are marked *