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

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 applications – Insert, Fetch , Edit – update , Delete Operations
• Angular 6 CRUD
• Angular 6 and ASP.NET Core 2.0 Web API
• Angular 6 features
• Angular 6 Form Validation
• Angular 6 – User Registration and Login
• Angularjs 6 User Registration and Login Authentication
• Angular 6 CLI Installation Tutorial With Example
• Angular 6 Toast Message Notifications From Scratch

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

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.