Angular 6 Service – with Observable Data for Asynchronous Operation

Angular Component is used to present data and delegate data access to a service. Angular Services are a great way to share data among classes. So in the tutorial, we introduce how to create Angular Service and use Observable class of RxJS library for asynchronous operation in Angular Service’s implementation.

Related posts:
Angular 6 Component – How to create & integrate New Angular 6 Component
Angular 6 Routing/Navigation – with Angular Router Service
How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite

Technologies

  • Node.js – version v10.4.0
  • Angular – version 6
  • Visual Studio Code – version 1.24.0

Practice

Generate Project Structure

Generate Angular Project:

angular-6-services + create-angular6- project

Generate Customer Component:

angular-6-services + create-a-component-customer

Generate Customer Service:

angular-6-services + create-an-angular-6-service-customer

Generate Customer classes:

angular-6-services + generate-angular-6-class

-> Project Structure:

angular-6-services + angular-project-structure

Implement Mock Data

Create data class in src/app/customer.ts file:

Mock Customer data in src/app/mock-customers.ts file:

Implement Angular Service

-> First look src/app/customer.service.ts file:

@Injectable decorator is a marker metadata that marks a class as available to Injector for creation.

Now, modify customer.service.ts file as below:

Update Angular Components

Firstly, import CustomerService:

Inject the CustomerService:

-> Now, We can use customerService as a CustomerService injection.

Fetch data from CustomerComponent via CustomerService:

Full code in customer.component.ts file:

In customer.component.html file, use Angular *ngFor to display data:

In AppComponent component, add selectỏr app-customer tag in style file app.component.html:

-> Result:

angular-6-services + load-data-from-service-synchronize-operation

Observable Data

What is the problem with above the service implementation?
-> CustomerService.getCustomers() is a synchronous method. It will Not work with real application (with remote APIs, waiting time for responses).

Solution:
-> Observable is a key class in the RxJS library which provides asynchronous operation.

Now, the sourcecode can be updated as below:

– With CustomerService, modify customer.component.ts class:

– With CustomerComponent, modify customer.component.ts class:

SourceCode

How to run the below sourcecode:

-> Source Code:

Angular-6-Service

By JavaSampleApproach | June 16, 2018.

Related Posts


Got Something To Say:

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

*