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
  Vue.JS Automatically Page Redirection

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

  WordPress HTTP API Remote Requests with wp_remote_get()
Angular 6 Observables Example Tutorial - Simple Angular 6 Observables Example
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>

  Laravel Pivot Tables Tutorial Example
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.

Leave a Reply

avatar
  Subscribe  
Notify of