September 1, 2026 17:44 by
PeterThis post will demonstrate how Observable handles async data along with a few other helpful patterns. Though there are some significant distinctions, observables and promises are comparable. Over time, promises and observables provide a variety of values. Handlers may emit more than one value at a time in real-time-based data or events. Observables are our greatest choice in this situation.
Observables are one of the most used methods in Angular. It is often used to read an API when integrating with Data Services. Other than that, the component must first subscribe to the observable in order to access it. To obtain the data in visible form, this is crucial.
Services in angular
Angular lets you define code or functionalities that are then accessible and reusable in many other components in your Angular apps.
The Services are used to create variable data that can be shared and used outside the component in which it is injected and called services. In angular services can be called from any component and data can be distributed to any component in the application.
First, we need to set up an angular application and follow the steps below.
To add a service, write the following command in the console.
ng g s service-name
OR
ng generate service-name
Here I have created the service name test-data.service.ts
import {
Injectable
} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestDataService {
constructor() {}
Testclick() {
console.log('Test Click');
}
}
The app.component.ts code
import {
Component
} from '@angular/core';
import {
TestDataService
} from './testdata-service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private Data: TestDataService) {}
TestClickMsg() {
this.Data.Testclick()
}
}
App.component.html
<body>
<button (click)="TestClickMsg()">Test Click</button>
</body>
Services With Observable
In combination, it is advisable to work with API. In the following example, there will be a Service in which an API will be accessed using the GET request feature provided in the HttpClientModule in Angular, which in turn returns an observable. This observable will be subscribed to by a component of the application and then show the values on the page.
The data.service.ts
import {
Injectable
} from '@angular/core';
//Importing HttpClientModule for GET request to API
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class TestDataService {
// making an instance for Get Request
constructor(private http_instance: HttpClient) {}
// function returning the observable
getAPIData() {
//API Call
//return this.http_instance.get('https://xxxxxxxxxxxxxxxxxxxxxxxxxxx');
return [{
"id": 1,
"first_name": "Test",
"last_name": "Peter 1"
}, {
"id": 2,
"first_name": "Test",
"last_name": "Peter 2"
}, {
"id": 3,
"first_name": "Test",
"last_name": "Peter 3"
}]
}
}
Here I have commanded API calls and added some static lists for our reference.
The app.component.ts
import {
Component
} from '@angular/core';
import {
TestDataService
} from './testdata-service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// instantiation of local object and the TestData Service
inst: Object | undefined;
constructor(private Data: TestDataService) {}
//Subscription of the TestData Service and putting all the
// data into the local instance of component
ngOnInit() {
this.Data.getAPIData().subscribe((data: Object | undefined) => {
this.inst = data;
})
}
}
App.component.html
<div *ngFor="let user of inst">
<p>{{ user.first_name }} {{ user.last_name }}</p>
</div>
Finally, I get the data from services using observable. I hope this article is most helpful for you.