Angular 11 Observable Service for Asynchronous Operation
Tags: angular11, observable, service
Published: 2021-03-11 10:58:18

https://grokonez.com/angular-11-observable-service-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 <code>Observable</code> class of RxJS library for asynchronous operation in Angular Service's implementation.

Related posts:
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-component-how-to-create-integrate-new-angular-6-component">Angular 11 Component – How to create & integrate New Angular 11 Component</a>
- <a href="https://grokonez.com/frontend/angular-6-routing-navigation-with-angular-router-service">Angular 11 Routing/Navigation – with Angular Router Service</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-integrate-angular-6-springboot-2-0-restapi-springtoolsuite">How to Integrate Angular 11 & SpringBoot 2.0 RestAPI – SpringToolSuite</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Node.js – version v10.4.0</li>
<li>Angular – version 6</li>
<li>Visual Studio Code – version 1.24.0</li>
</ul>
<h2>Practice</h2>
<h3>Generate Project Structure</h3>
Generate Angular Project:

<pre>
ng new angular6-service
</pre>

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-services-create-angular6-project.png" alt="angular-6-services + create-angular6- project" width="570" height="497" class="alignnone size-full wp-image-13032" />

Generate Customer Component:

<pre>
ng generate component customer
</pre>

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-services-create-a-component-customer.png" alt="angular-6-services + create-a-component-customer" width="527" height="102" class="alignnone size-full wp-image-13033" />

Generate Customer Service:

<pre>
ng generate service customer
</pre>

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-services-create-an-angular-6-service-customer.png" alt="angular-6-services + create-an-angular-6-service-customer" width="475" height="56" class="alignnone size-full wp-image-13034" />

Generate Customer classes:

<pre>
ng generate class customer
ng generate class mock-customers
</pre>

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-services-generate-angular-6-class.png" alt="angular-6-services + generate-angular-6-class" width="528" height="101" class="alignnone size-full wp-image-13035" />

-> Project Structure:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-services-angular-project-structure.png" alt="angular-6-services + angular-project-structure" width="256" height="545" class="alignnone size-full wp-image-13036" />
<h3>Implement Mock Data</h3>
Create data class in <em>src/app/customer.ts</em> file:

<pre><code class="language-javascript">
export class Customer {
    id: number;
    firstname: string;
    lastname: string;
    age: number
}</code></pre>

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

<pre><code class="language-javascript">
import { Customer } from './Customer';
 
export const CUSTOMERS: Customer[] = [
      {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24},
      {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18},
      {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31}
];</code></pre>

More at: https://grokonez.com/angular-11-observable-service-for-asynchronous-operation