Posted inTechnology / AngularJS

Simple Angular 6 Observables Example

Today, We want to share with you Simple Angular 6 Observables Example.In this post we will show you Angular 6 Observables and Promises, hear for Creating an Observable with Angular 6 we will give you demo and example for implement.In this post, we will learn about Angular 6: Upgrading API calls to RxJS 6 with an example.

Simple Angular 6 Observables Example

There are the Following The simple About Simple Angular 6 Observables Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 RxJS 6 Tutorial & Example, so the some major files and Directory structures for this example is following below.

  • Making an observable
  • 1: Setup Angular 6.
  • 2: MAke a JSON server.
  • 3: Get the data.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client

Angular 6 Making an observable

import { Observable } from 'rxjs';

// Make observable
const memberObservable = new Observable((observer) => {
    //Angular 6 observable execution
    observer.next('Hello Observable');
    observer.complete();
});

// subscribe Simple Angular 6 Observables Example
memberObservable.subscribe();

Simple Angular 6 Observables Example Tutorial

Step #1: Install Angular 6.

Angular CLI for Angular 6

npm install -g @angular/cli

// create a local angular-6 project
ng new observables

Step #2: Make an Angular 6 JSON server.

//Json in Angular 6 Observables Example Tutorial From Scratch
{
    "memberList": [
    {
        "id": "1",
        "name": "Jaydeep Gondaliya",
        "salary": "120265"
    },
    {
        "id": "2",
        "name": "Krunal Sisodiya",
        "salary": "18500"
    },
    {
        "id": "3",
        "name": "Ankit Kathiriya",
        "salary": "245850"
    },
    {
        "id": "4",
        "name": "Chirag dethariya",
        "salary": "358523"
    },
    {
        "id": "5",
        "name": "Dhaval dave",
        "salary": "252030"
    }]
}

Simple Angular 6 Observables Screen Shot

start the JSON server in Angular 6 – Screen Shot

Angular-6-Observables-Example-Tutorial
Angular-6-Observables-Example-Tutorial

Step #3: Get the data.

LMember.ts

// LMember.ys

export interface LMember {
    id: Number;
    name: String;
    salary: Number;
}

Make a service file using angular-6

ng g s member --spec=false

member.service.ts

// member.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MemberService {

  constructor(private http: HttpClient) { }

  protected url = 'http://localhost:4000';

  getMembers(): Observable {
    return this
            .http
            .get(`${this.url}/memberList`)
            .pipe(
              map(res => res)
          );
      }
}

app.component.ts

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { MemberService } from './member.service';
import { LMember } from './LMember';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  protected title = 'app';
  protected members$: Observable;

  constructor(public memberservice: MemberService) {}

  ngOnInit() {
    this.memberservice.getMembers().subscribe(res => {
      this.members$ = res;
    });
  }
}

Angular 6 HTML Interface

The members$ observable

Simple Angular 6 Observables Example

ID Member Name Member Salary
{{ member.id }} {{ member.name }} {{ member.salary }}
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 Observables Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype