Home » Simple Angular 6 Observables Example

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
Read Also:  Laravel Display Decoded JSON From Database in Blade View

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

Read Also:  JavaScript Client side Password hashing and encryption
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

<p>Simple Angular 6 Observables Example</p>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Member Name</th>
      <th>Member Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ member.id }}</td>
      <td>{{ member.name }}</td>
      <td>{{ member.salary }}</td>
    </tr>
  </tbody>
</table>

Read Also:  Laravel Set cron job in cpanel Scheduling Tutorial
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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 6 Localization tutorial example - PHP
  2. Read Also:  Laravel Multiple Database Connections Step By Step
  3. Read Also:  jQuery Ajax Login Script using PHP MySQLi
  4. Read Also:  Laravel 6 Joins Example Tutorial
  5. Read Also:  Laravel Check and uncheck all checkbox using jquery
  6. Read Also:  Load More Data from Database using vue.js Ajax PHP
  7. Read Also:  Laravel 6 Localization tutorial example - PHP
  8. Read Also:  jQuery Ajax Login Script using PHP MySQLi
  9. Read Also:  Laravel Set cron job in cpanel Scheduling Tutorial
  10. Read Also:  Extract XML Response in PHP Example

Leave a Comment

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