What is the Difference Between Observable and Promise With Example in Angular 8

Introduction

 
Observables Vs Promise
 
Observables and Promise both provide us with abstractions that help us deal with the asynchronous nature of applications.
 
Promise
 
Promise work with asynchronous operations. They either return a single value (i.e the promise resolves) or an error message (i.e the promise rejects)
 
Another important thing to remember regarding promise is that a request initiated from a promise is not cancellable.
 
Disadvantages of Promise:
  1. User could not cancel a request to the API
  2. User could not retry a failed call
  3. As our application gets bigger, Promise becomes hard to manage
Observables
 
An Observable is an Array or a sequence of events over time. It has at least two participants. The creator (the data source) and the subscriber (subscription where data is being consumed). Compared to a promise, an observable can be canceled.
 
RxJS is all about unifying the ideas of promise callbacks and data flow and making them easier to work with. 
 
Observables provides operators like map.forEach, reduce,...similar to an array.
 
There are also powerful operators like retry().or reply(),retryWhen(),delay()
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed

Back End

 
Here, with Backend related code, we will do it using SQL server
 
The very first step is to create a database
 
Step 1
 
Let’s create a database on your local SQL Server. I hope you have installed SQL Server 2017 in your machine (you can use SQL Server 2008, 2012, or 2016, as well).
  1. create database country
Step 2
 
Create Country Table using the following code:
  1. CREATE TABLE tbl_Countries  
  2. (  
  3.      CountryID INT  
  4.     ,CountryName VARCHAR(50)  
  5.     ,TwoCharCountryCode CHAR(2)  
  6.     ,ThreeCharCountryCode CHAR(3)      
  7. );  
  8.   
  9.   
  10. INSERT INTO tbl_Countries VALUES   
  11. (1,'Afghanistan','AF','AFG')  
  12. ,(2,'Aland Islands','AX','ALA')  
  13. ,(3,'Albania','AL','ALB')  
  14. ,(4,'Algeria','DZ','DZA')  
  15. ,(5,'American Samoa','AS','ASM')  
  16. ,(6,'Andorra','AD','AND')  
  17. ,(7,'Angola','AO','AGO')  
  18. ,(8,'Anguilla','AI','AIA')  
  19. ,(9,'Antarctica','AQ','ATA')  
  20. ,(10,'Antigua and Barbuda','AG','ATG')  
  21. ,(11,'Argentina','AR','ARG')  
  22. ,(12,'Armenia','AM','ARM')  
  23. ,(13,'Aruba','AW','ABW')  
  24. ,(14,'Australia','AU','AUS')  
  25. ,(15,'Austria','AT','AUT')  
  26. ,(16,'Azerbaijan','AZ','AZE')  
  27. ,(17,'Bahamas','BS','BHS')  
  28. ,(18,'Bahrain','BH','BHR')  
  29. ,(19,'Bangladesh','BD','BGD')  
  30. ,(20,'Barbados','BB','BRB')  
  31. ,(21,'Belarus','BY','BLR')  
  32. ,(22,'Belgium','BE','BEL')  
  33. ,(23,'Belize','BZ','BLZ')  
  34. ,(24,'Benin','BJ','BEN')  
  35. ,(25,'Bermuda','BM','BMU')  
  36. ,(26,'Bhutan','BT','BTN')  
  37. ,(27,'Bolivia','BO','BOL')  
  38. ,(28,'Bonaire, Sint Eustatius and Saba','BQ','BES')  
  39. ,(29,'Bosnia and Herzegovina','BA','BIH')  
  40. ,(30,'Botswana','BW','BWA')  
  41. ,(31,'Bouvet Island','BV','BVT')  
  42. ,(32,'Brazil','BR','BRA')  
  43. ,(33,'British Indian Ocean Territory','IO','IOT')  
  44. ,(34,'Brunei','BN','BRN')  
  45. ,(35,'Bulgaria','BG','BGR')  
  46. ,(36,'Burkina Faso','BF','BFA')  
  47. ,(37,'Burundi','BI','BDI')  
  48. ,(38,'Cambodia','KH','KHM')  
  49. ,(39,'Cameroon','CM','CMR')  
  50. ,(40,'Canada','CA','CAN')  
  51. ,(41,'Cape Verde','CV','CPV')  
  52. ,(42,'Cayman Islands','KY','CYM')  
  53. ,(43,'Central African Republic','CF','CAF')  
  54. ,(44,'Chad','TD','TCD')  
  55. ,(45,'Chile','CL','CHL')  
  56. ,(46,'China','CN','CHN')  
  57. ,(47,'Christmas Island','CX','CXR')  
  58. ,(48,'Cocos (Keeling) Islands','CC','CCK')  
  59. ,(49,'Colombia','CO','COL')  
  60. ,(50,'Comoros','KM','COM')  
  61. ,(51,'Congo','CG','COG')  
  62. ,(52,'Cook Islands','CK','COK')  
  63. ,(53,'Costa Rica','CR','CRI')  
  64. ,(54,'Ivory Coast','CI','CIV')  
  65. ,(55,'Croatia','HR','HRV')  
  66. ,(56,'Cuba','CU','CUB')  
  67. ,(57,'Curacao','CW','CUW')  
  68. ,(58,'Cyprus','CY','CYP')  
  69. ,(59,'Czech Republic','CZ','CZE')  
  70. ,(60,'Democratic Republic of the Congo','CD','COD')  
  71. ,(61,'Denmark','DK','DNK')  
  72. ,(62,'Djibouti','DJ','DJI')  
  73. ,(63,'Dominica','DM','DMA')  
  74. ,(64,'Dominican Republic','DO','DOM')  
  75. ,(65,'Ecuador','EC','ECU')  
  76. ,(66,'Egypt','EG','EGY')  
  77. ,(67,'El Salvador','SV','SLV')  
  78. ,(68,'Equatorial Guinea','GQ','GNQ')  
  79. ,(69,'Eritrea','ER','ERI')  
  80. ,(70,'Estonia','EE','EST')  
  81. ,(71,'Ethiopia','ET','ETH')  
  82. ,(72,'Falkland Islands (Malvinas)','FK','FLK')  
  83. ,(73,'Faroe Islands','FO','FRO')  
  84. ,(74,'Fiji','FJ','FJI')  
  85. ,(75,'Finland','FI','FIN')  
  86. ,(76,'France','FR','FRA')  
  87. ,(77,'French Guiana','GF','GUF')  
  88. ,(78,'French Polynesia','PF','PYF')  
  89. ,(79,'French Southern Territories','TF','ATF')  
  90. ,(80,'Gabon','GA','GAB')  
  91. ,(81,'Gambia','GM','GMB')  
  92. ,(82,'Georgia','GE','GEO')  
  93. ,(83,'Germany','DE','DEU')  
  94. ,(84,'Ghana','GH','GHA')  
  95. ,(85,'Gibraltar','GI','GIB')  
  96. ,(86,'Greece','GR','GRC')  
  97. ,(87,'Greenland','GL','GRL')  
  98. ,(88,'Grenada','GD','GRD')  
  99. ,(89,'Guadaloupe','GP','GLP')  
  100. ,(90,'Guam','GU','GUM')  
  101. ,(91,'Guatemala','GT','GTM')  
  102. ,(92,'Guernsey','GG','GGY')  
  103. ,(93,'Guinea','GN','GIN')  
  104. ,(94,'Guinea-Bissau','GW','GNB')  
  105. ,(95,'Guyana','GY','GUY')  
  106. ,(96,'Haiti','HT','HTI')  
  107. ,(97,'Heard Island and McDonald Islands','HM','HMD')  
  108. ,(98,'Honduras','HN','HND')  
  109. ,(99,'Hong Kong','HK','HKG')  
  110. ,(100,'Hungary','HU','HUN')  
  111. ,(101,'Iceland','IS','ISL')  
  112. ,(102,'India','IN','IND')  
  113. ,(103,'Indonesia','ID','IDN')  
  114. ,(104,'Iran','IR','IRN')  
  115. ,(105,'Iraq','IQ','IRQ')  
  116. ,(106,'Ireland','IE','IRL')  
  117. ,(107,'Isle of Man','IM','IMN')  
  118. ,(108,'Israel','IL','ISR')  
  119. ,(109,'Italy','IT','ITA')  
  120. ,(110,'Jamaica','JM','JAM')  
  121. ,(111,'Japan','JP','JPN')  
  122. ,(112,'Jersey','JE','JEY')  
  123. ,(113,'Jordan','JO','JOR')  
  124. ,(114,'Kazakhstan','KZ','KAZ')  
  125. ,(115,'Kenya','KE','KEN')  
  126. ,(116,'Kiribati','KI','KIR')  
  127. ,(117,'Kosovo','XK','---')  
  128. ,(118,'Kuwait','KW','KWT')  
  129. ,(119,'Kyrgyzstan','KG','KGZ')  
  130. ,(120,'Laos','LA','LAO')  
  131. ,(121,'Latvia','LV','LVA')  
  132. ,(122,'Lebanon','LB','LBN')  
  133. ,(123,'Lesotho','LS','LSO')  
  134. ,(124,'Liberia','LR','LBR')  
  135. ,(125,'Libya','LY','LBY')  
  136. ,(126,'Liechtenstein','LI','LIE')  
  137. ,(127,'Lithuania','LT','LTU')  
  138. ,(128,'Luxembourg','LU','LUX')  
  139. ,(129,'Macao','MO','MAC')  
  140. ,(130,'Macedonia','MK','MKD')  
  141. ,(131,'Madagascar','MG','MDG')  
  142. ,(132,'Malawi','MW','MWI')  
  143. ,(133,'Malaysia','MY','MYS')  
  144. ,(134,'Maldives','MV','MDV')  
  145. ,(135,'Mali','ML','MLI')  
  146. ,(136,'Malta','MT','MLT')  
  147. ,(137,'Marshall Islands','MH','MHL')  
  148. ,(138,'Martinique','MQ','MTQ')  
  149. ,(139,'Mauritania','MR','MRT')  
  150. ,(140,'Mauritius','MU','MUS')  
  151. ,(141,'Mayotte','YT','MYT')  
  152. ,(142,'Mexico','MX','MEX')  
  153. ,(143,'Micronesia','FM','FSM')  
  154. ,(144,'Moldava','MD','MDA')  
  155. ,(145,'Monaco','MC','MCO')  
  156. ,(146,'Mongolia','MN','MNG')  
  157. ,(147,'Montenegro','ME','MNE')  
  158. ,(148,'Montserrat','MS','MSR')  
  159. ,(149,'Morocco','MA','MAR')  
  160. ,(150,'Mozambique','MZ','MOZ')  
  161. ,(151,'Myanmar (Burma)','MM','MMR')  
  162. ,(152,'Namibia','NA','NAM')  
  163. ,(153,'Nauru','NR','NRU')  
  164. ,(154,'Nepal','NP','NPL')  
  165. ,(155,'Netherlands','NL','NLD')  
  166. ,(156,'New Caledonia','NC','NCL')  
  167. ,(157,'New Zealand','NZ','NZL')  
  168. ,(158,'Nicaragua','NI','NIC')  
  169. ,(159,'Niger','NE','NER')  
  170. ,(160,'Nigeria','NG','NGA')  
  171. ,(161,'Niue','NU','NIU')  
  172. ,(162,'Norfolk Island','NF','NFK')  
  173. ,(163,'North Korea','KP','PRK')  
  174. ,(164,'Northern Mariana Islands','MP','MNP')  
  175. ,(165,'Norway','NO','NOR')  
  176. ,(166,'Oman','OM','OMN')  
  177. ,(167,'Pakistan','PK','PAK')  
  178. ,(168,'Palau','PW','PLW')  
  179. ,(169,'Palestine','PS','PSE')  
  180. ,(170,'Panama','PA','PAN')  
  181. ,(171,'Papua New Guinea','PG','PNG')  
  182. ,(172,'Paraguay','PY','PRY')  
  183. ,(173,'Peru','PE','PER')  
  184. ,(174,'Phillipines','PH','PHL')  
  185. ,(175,'Pitcairn','PN','PCN')  
  186. ,(176,'Poland','PL','POL')  
  187. ,(177,'Portugal','PT','PRT')  
  188. ,(178,'Puerto Rico','PR','PRI')  
  189. ,(179,'Qatar','QA','QAT')  
  190. ,(180,'Reunion','RE','REU')  
  191. ,(181,'Romania','RO','ROU')  
  192. ,(182,'Russia','RU','RUS')  
  193. ,(183,'Rwanda','RW','RWA')  
  194. ,(184,'Saint Barthelemy','BL','BLM')  
  195. ,(185,'Saint Helena','SH','SHN')  
  196. ,(186,'Saint Kitts and Nevis','KN','KNA')  
  197. ,(187,'Saint Lucia','LC','LCA')  
  198. ,(188,'Saint Martin','MF','MAF')  
  199. ,(189,'Saint Pierre and Miquelon','PM','SPM')  
  200. ,(190,'Saint Vincent and the Grenadines','VC','VCT')  
  201. ,(191,'Samoa','WS','WSM')  
  202. ,(192,'San Marino','SM','SMR')  
  203. ,(193,'Sao Tome and Principe','ST','STP')  
  204. ,(194,'Saudi Arabia','SA','SAU')  
  205. ,(195,'Senegal','SN','SEN')  
  206. ,(196,'Serbia','RS','SRB')  
  207. ,(197,'Seychelles','SC','SYC')  
  208. ,(198,'Sierra Leone','SL','SLE')  
  209. ,(199,'Singapore','SG','SGP')  
  210. ,(200,'Sint Maarten','SX','SXM')  
  211. ,(201,'Slovakia','SK','SVK')  
  212. ,(202,'Slovenia','SI','SVN')  
  213. ,(203,'Solomon Islands','SB','SLB')  
  214. ,(204,'Somalia','SO','SOM')  
  215. ,(205,'South Africa','ZA','ZAF')  
  216. ,(206,'South Georgia and the South Sandwich Islands','GS','SGS')  
  217. ,(207,'South Korea','KR','KOR')  
  218. ,(208,'South Sudan','SS','SSD')  
  219. ,(209,'Spain','ES','ESP')  
  220. ,(210,'Sri Lanka','LK','LKA')  
  221. ,(211,'Sudan','SD','SDN')  
  222. ,(212,'Suriname','SR','SUR')  
  223. ,(213,'Svalbard and Jan Mayen','SJ','SJM')  
  224. ,(214,'Swaziland','SZ','SWZ')  
  225. ,(215,'Sweden','SE','SWE')  
  226. ,(216,'Switzerland','CH','CHE')  
  227. ,(217,'Syria','SY','SYR')  
  228. ,(218,'Taiwan','TW','TWN')  
  229. ,(219,'Tajikistan','TJ','TJK')  
  230. ,(220,'Tanzania','TZ','TZA')  
  231. ,(221,'Thailand','TH','THA')  
  232. ,(222,'Timor-Leste (East Timor)','TL','TLS')  
  233. ,(223,'Togo','TG','TGO')  
  234. ,(224,'Tokelau','TK','TKL')  
  235. ,(225,'Tonga','TO','TON')  
  236. ,(226,'Trinidad and Tobago','TT','TTO')  
  237. ,(227,'Tunisia','TN','TUN')  
  238. ,(228,'Turkey','TR','TUR')  
  239. ,(229,'Turkmenistan','TM','TKM')  
  240. ,(230,'Turks and Caicos Islands','TC','TCA')  
  241. ,(231,'Tuvalu','TV','TUV')  
  242. ,(232,'Uganda','UG','UGA')  
  243. ,(233,'Ukraine','UA','UKR')  
  244. ,(234,'United Arab Emirates','AE','ARE')  
  245. ,(235,'United Kingdom','GB','GBR')  
  246. ,(236,'United States','US','USA')  
  247. ,(237,'United States Minor Outlying Islands','UM','UMI')  
  248. ,(238,'Uruguay','UY','URY')  
  249. ,(239,'Uzbekistan','UZ','UZB')  
  250. ,(240,'Vanuatu','VU','VUT')  
  251. ,(241,'Vatican City','VA','VAT')  
  252. ,(242,'Venezuela','VE','VEN')  
  253. ,(243,'Vietnam','VN','VNM')  
  254. ,(244,'Virgin Islands, British','VG','VGB')  
  255. ,(245,'Virgin Islands, US','VI','VIR')  
  256. ,(246,'Wallis and Futuna','WF','WLF')  
  257. ,(247,'Western Sahara','EH','ESH')  
  258. ,(248,'Yemen','YE','YEM')  
  259. ,(249,'Zambia','ZM','ZMB')  
  260. ,(250,'Zimbabwe','ZW','ZWE');  
Now let's add Store Procedures
 
Step 3
 
Create Stored Procedure of the following,
  1. CREATE Proc searchCountryByName  
  2. @VALUE nvarchar(50)  
  3. AS  
  4. BEGIN  
  5.     select * from [dbo].[tbl_Countries] where CountryName LIKE '' + @VALUE + '%'  
  6. END  

Web API

 
Create an ASP.NET Core application
 
Follow these steps to create an ASP.NET Core application.
 
Step 1
 
In Visual Studio 2019, click on File -> New -> Project.
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 2
 
Choose the Create option and select the ASP.NET web application.
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 3
 
 
Select Web API and click Ok.
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 4 
 
Now right click on the controller and add a new item.
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 5
 
Choose Ado.net Entity Data Model, then click on Add
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 6
 
Next Step is EF Designer, just click on next.
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 7
 
A new pop-up will show. Click on next. If your's isn't established, then click on a new connection
 
Server Side Pagination Using ASP.NET Core And Angular 8
 
Step 8
 
Copy your database connection server name and paste it in the server name textbox. You will see all the databases, select your database and click on OK.
 
 
 
Step 9
 
Here, in the new screen, select your tables and store the procedure. Then click on finish.
 
Our next step is to right-click on the Controllers folder and add a new controller. Name it "CountryController" and add the following namespace in the Countrycontroller. 
 
Complete Countrycontroller code
  1. using System.Linq;  
  2. using System.Web.Http;  
  3. using CompanyDetails.Entities;  
  4. namespace CountryDetails.Controllers  
  5. {  
  6.     [RoutePrefix("api/Country")]  
  7.     public class CountryController : ApiController  
  8.     {  
  9.         CountryEntities5 DB = new CountryEntities5();  
  10.   
  11.         [HttpGet]  
  12.         [Route("getSearchedCountry")]  
  13.         public object getSearchedCountry(string keyword)  
  14.         {  
  15.             var countryResult = DB.searchCountryByName(keyword).ToList();  
  16.                 return countryResult;  
  17.         }  
  18.     }  
  19. }  

FRONTEND 

 
Step 1
 
Let's create a new Angular project using the following NPM command,
  1. ng new observablevspromise
Step 2
 
Now, let's create a new component for "Observable " by using the following command:
  1. ng g c observable-example
Step 3
 
 Now, let's create a new component for "Promise" by using the following command,
  1. ng g c promise-example  
Here, I am creating two different components one for observable example and another for promise.
 
First, we will see the example for Promise.
 
Step 4
 
Now, open the promise-example.component.html file and add the following code in the file:
  1. <div style="text-align: center;">  
  2.   <h1>  
  3.     Example of Fetching data using Promise    
  4.   </h1>  
  5.   <div>  
  6.     <h2>  
  7.       Country Name Search  
  8.     </h2>  
  9.     <input #term type="text" (keyup)="searchCountryUsingPromise(term.value)">  
  10.     <div>  
  11.       <li *ngFor="let result of country">  
  12.         {{result.CountryName}}  
  13.       </li>  
  14.     </div>  
  15.   </div>  
  16. </div>  
 Step 5 
 
Now, open the promise-example.component.ts file and add the following code in this file:
  1. import { Component, OnInit } from '@angular/core';  
  2. import { CountryService } from '../country.service';  
  3.   
  4. @Component({  
  5.   selector: 'app-promise-example',  
  6.   templateUrl: './promise-example.component.html',  
  7.   styleUrls: ['./promise-example.component.css']  
  8. })  
  9. export class PromiseExampleComponent implements OnInit {  
  10.   country: any;  
  11.   
  12.   constructor(private _countryService:CountryService) { }  
  13.   
  14.   ngOnInit() {  
  15.   }  
  16.   public searchCountryUsingPromise(keyWord){  
  17.     this._countryService.getSearchedCountry(keyWord).toPromise()  
  18.     .then((data:any) =>{  
  19.       console.log(data);  
  20.       this.country =data;  
  21.     });  
  22.   }  
  23. }  
Step 6
 
The next step is to create a service.
  1. ng g s country.service.ts  
 Now, open the country.service.ts file and add the following code in this file
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from '@angular/common/http';  
  3.   
  4.   
  5. @Injectable()  
  6.   
  7.   
  8. export class CountryService {  
  9.   employees: any[];  
  10.   
  11.   private url = '';  
  12.   private baseUrl = "http://localhost:49661/";//Replace it with your http address and port  
  13.   
  14.   constructor(public http: HttpClient) {  
  15.   }  
  16.   
  17.   getSearchedCountry(keyWord) {  
  18.     this.url = this.baseUrl + 'api/Country/getSearchedCountry?keyword='+keyWord;  
  19.     return this.http.get<any[]>(this.url);  
  20.   }  
  21. }  
Step 7
 
Open file app.module.ts and paste the below code 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. import { HttpClientModule } from '@angular/common/http';  
  6. import { TrackbyComponent } from './trackby/trackby.component';  
  7. import { ObservableExampleComponent } from './observable-example/observable-example.component';  
  8. import { PromiseExampleComponent } from './promise-example/promise-example.component';  
  9. import { CountryService } from './country.service';  
  10.   
  11. @NgModule({  
  12.   declarations: [  
  13.     AppComponent,  
  14.     TrackbyComponent,  
  15.     ObservableExampleComponent,  
  16.     PromiseExampleComponent  
  17.   ],  
  18.   imports: [  
  19.     BrowserModule,  
  20.     FormsModule,  
  21.     ReactiveFormsModule,  
  22.     HttpClientModule  
  23.   ],  
  24.   providers: [CountryService],  
  25.   bootstrap: [AppComponent]  
  26. })  
  27. export class AppModule { }  
 Step 8
 
Now, open app.component.html and add the below code
  1. <app-promise-example></app-promise-example>  
Now its time for the Output,
 
As we can see, whenever I am typing the key, it's hitting the API every time (i.e it's going to the server every time and getting the data.)
 
Example of Observable:
 
Step 9 
 
Now, open the observable-example.component.html file and add the following code in the file.
  1. <div style="text-align: center;">  
  2.   <h1>  
  3.     Example of Fetching data using Observable  
  4.   </h1>  
  5.   <div>  
  6.     <h2>  
  7.       Country Name Search  
  8.     </h2>  
  9.     <input type="text" [formControl]="term">  
  10.     <div>  
  11.       <li *ngFor="let result of country">  
  12.         {{result.CountryName}}  
  13.       </li>  
  14.     </div>  
  15.   </div>  
  16. </div>  
Step 10
 
Now, open the observable-example.component.ts file and add the following code in this file
  1. import { Component, OnInit } from '@angular/core';  
  2. import { CountryService } from '../country.service';  
  3. import { FormControl } from '@angular/forms';  
  4. import 'rxjs/add/operator/debounceTime';  
  5. import 'rxjs/add/operator/distinctUntilChanged';  
  6.   
  7. @Component({  
  8.   selector: 'app-observable-example',  
  9.   templateUrl: './observable-example.component.html',  
  10.   styleUrls: ['./observable-example.component.css']  
  11. })  
  12. export class ObservableExampleComponent implements OnInit {  
  13.   country: any;  
  14.   constructor(private _countryService:CountryService) { }  
  15.   private term =new FormControl();  
  16.   ngOnInit() {  
  17.     this.term.valueChanges  
  18.     .debounceTime(400)  
  19.     .distinctUntilChanged()  
  20.     .subscribe(searchText=>{  
  21.       this._countryService.getSearchedCountry(searchText).subscribe((result)=>{  
  22.         console.log(result);  
  23.           
  24.         this.country =result;  
  25.       })  
  26.      
  27.     })  
  28.   }  
  29.  
  30. }  
Step 11
 
Replace app.component.html file with the below code. 
  1. <app-observable-example></app-observable-example>  
Now its time for the Output for Observable,
 
 
 
As we can see, as soon as I press the key, it's hitting the API every 400 milliseconds, so rather than hitting it on every keypress it's hitting every 400-milliseconds using debounceTime operator in RxJS
 
 So with the help of RxJS operators, we can achieve this so that it can improve our application performance.
 

Conclusion

 
In this article, we have seen the difference between Observable vs Promise in Angular 8 Application.
 
Please give your valuable feedback/comments/questions about this article. Please let me know how to improve it.
 
In my next article, we are going to learn the RxJS operators with examples.