Create observable from array

Описание: In this video we will discuss, how to create an observable from static data in an array. Along the way, we will discuss, the 2 most common issues that you will run into when working with observables in your angular application.

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
   / @aarvikitchen5572  

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
   • Angular CRUD tutorial  

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic  

There are several ways to create an observable. The simplest of all is to use Observable.of() as shown below.

import { Injectable } from '@angular/core';
import { Employee } from '../models/employee.model';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class EmployeeService {

private listEmployees: Employee[] = [
{ id: 1, name: 'Mark' },
{ id: 2, name: 'Mary' },
{ id: 3, name: 'John' },
];

getEmployees(): Observable[Employee[]] {
return Observable.of(this.listEmployees);
}
}

At this point, you might be wondering why do we have to return an Observable[Employee[]] instead of just an Employee[] from getEmployees() method. Well, this is because in a real world application, we would not have data hard coded like this in the angular service. We retrieve it from a database by calling a server side service using the angular http service. The angular http service returns an observable.

We discussed Observables and calling server side service using the angular HTTP service in Part 27 of Angular 2 tutorial.

Observables and HTTP Service
   • Angular 2 http service tutorial  

In our upcoming videos in this series, we will discuss calling a server side service. So in preparation for that, we are creating and returning an Observable.

In a typical real world application, when a server side service is called over HTTP, there may be some latency and we may not get the data immediately. So to simulate some artificial latency and understand the implications it can have on the code that consumes this returned Observable, import and use the delay operator as shown below. Notice we have a delay of 2000 milli-seconds.

import 'rxjs/add/operator/delay';

getEmployees(): Observable[Employee[]] {
return Observable.of(this.listEmployees).delay(2000);
}

For the rest of the code please check our blog at the following link
http://csharp-video-tutorials.blogspo...