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
Also Read :  Laravel create Dynamic Email Templates from Database

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

Also Read :  BOOTSTRAP ACCORDION WITH PLUS MINUS ICON
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>

Also Read :  Creating Laravel Web Installer Setup Wizard
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