Call API and Apply Socket In Apngular 4

Call API and Apply Socket In Apngular 4

import { Component, OnInit } from '@angular/core';

import { WebServiceService} from '../web-service.service';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

@Component({

selector: 'app-websocket',

templateUrl: './websocket.component.html',

styleUrls: ['./websocket.component.css']

})

export class WebsocketComponent implements OnInit {

constructor(private ws: WebServiceService) {

console.log('contractor');

this.getChartData('ADABTC');

this.GetFeeds();

}

ngOnInit() {

}

getChartData(s) {

console.log('getChartData');

try {

let params = {

Symbol: s,

PkgId: this.ws.Trading_PkgId,

PartnerId: 0//this.GBS.DealerId

};

this.ws.GetChartHistory(params).subscribe(data => {

console.log('Chart Data',data);

});

} catch (e) { }

}

GetFeeds() {

console.log("Broad Cast Start");

var ws = this.ws.Broadcast('100|1|10');

var g = this.ws;

var me = this;

ws.onmessage = function (evt) {

try {

console.log("Broad Cast Data",evt);

} catch (e) {

console.log('Broadcast Socket Error', e);

}

}

}

}

webService.service.ts

import { Injectable } from '@angular/core';

import { HttpParams, HttpClient } from '@angular/common/http';

import { Http } from '@angular/http';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/filter';

import 'rxjs/add/operator/map';

@Injectable()

export class WebServiceService {

url: string = 'https://apis.xyz.com/CryptExchAPI_Bity';

socketUrl: string = 'ws://x.xxx.xxx.xxx:19555/';

Trading_PkgId: number = 14;

constructor(public http: Http) { }

GetChartHistory(params: any) {

return this.get('GET_HISTORICAL_DATA_BYID', params);

}

get(endPointg: string, params?: any, optn?: any) {

if (!optn) {

optn = {

params: new HttpParams()

};

};

let p = [];

let newParam;

if (params) {

for (let k in params) {

let str = k + '=' + params[k];

p.push(str);

}

newParam = p.join('&');

} try {

return this.http.get(this.url + '/' + endPointg + '?' + newParam)

.map(response => response.json());

} catch (e) {

console.log(e);

}

}

//SOCKET

Broadcast(params) {

return this.webSocket('BB', params);

}

webSocket(domain: string, param?: any) {

var fws = new WebSocket(this.socketUrl + domain);

fws.onopen = function () {

fws.send(param); // Send the message 'Ping' to the server

};

return fws;

}

}

data transfer from any component to any component USING rxjs | Angular 4

data transfer from any component to any component USING rxjs | Angular 4

Data.Service

import { Injectable } from '@angular/core';

import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()

export class DataService {

private messageSource=new BehaviorSubject<string[]>(['Default Message','Message2']);

currentMessage=this.messageSource.asObservable();

constructor() { }

changeMessage(message:string[]){

this.messageSource.next(message);

}

}

Parent.component

import { Component, OnInit,ViewChild,AfterViewInit } from '@angular/core';

import { DataService } from '../data.service';

@Component({

selector: 'app-parent',

template: `<p> Parent Component!{{message}}</p>

<app-chiled></app-chiled>`,

styleUrls: ['./parent.component.css']

})

export class ParentComponent implements OnInit {

message:string;

constructor(private data:DataService) { }

ngOnInit() {

this.data.currentMessage.subscribe(message => this.message = message[0]);

}

}

Child Component

import { Component, OnInit, Input,Output,EventEmitter } from '@angular/core';

import { DataService } from '../data.service';

@Component({

selector: 'app-chiled',

template: `<p>child component :{{message}}{{message2}}</p>`,

styleUrls: ['./chiled.component.css']

})

export class ChiledComponent implements OnInit {

message: string;

message2: string;

constructor(private data:DataService) { }

ngOnInit() {

this.data.currentMessage.subscribe(msg => this.message = msg[0],msg=> this.message2=msg[1]);

}

}

Sibling Component

import { Component, OnInit } from '@angular/core';

import { DataService } from '../data.service';

@Component({

selector: 'app-sibling',

template: `<p> sibling works!{{message}}</p>

<input type="button" value="change Message" (click)=newMessage()>`,

styleUrls: ['./sibling.component.css']

})

export class SiblingComponent implements OnInit {

message: string;

constructor(private data: DataService) { }

ngOnInit() {

this.data.currentMessage.subscribe(message => this.message = message[1]);

}

newMessage(){

this.data.changeMessage(['message Change']);

}

}

Output:

Parent Component!Default Message

child component :Default Message

sibling works!Message2

after click button

Parent Component!message Change

child component :message Change

sibling works!

data transfer from ChildToParent via ViewChild() | Angular 4

Parent Component

import { Component, OnInit,ViewChild,AfterViewInit } from '@angular/core';

import { ChiledComponent} from '../chiled/chiled.component';

@Component({

selector: 'app-parent',

template: `<p>

Parent Component!{{message1}}

</p>

<app-chiled></app-chiled>`,

styleUrls: ['./parent.component.css']

})

export class ParentComponent implements AfterViewInit {

@ViewChild(ChiledComponent) child;

message1:string="Parent Message";

constructor() { }

ngAfterViewInit(){

this.message1 = this.child.message;

}

}

Child Component

import { Component, OnInit, Input,Output,EventEmitter } from '@angular/core';

@Component({

selector: 'app-chiled',

template: `<p>

child component :{{message}}

</p>

`,

styleUrls: ['./chiled.component.css']

})

export class ChiledComponent implements OnInit {

message: string="chiled Message";

constructor() { }

ngOnInit() {

}

}

Out Put:

Parent Component!chiled Message

child component :chiled Message

data transfer from ChildToParent | Angular 4

Parent Component

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-parent',

template: `<p>

parent works!Message comming from chilked{{messageChiledToParent}}

</p>

<app-chiled (messageEvent)="resiveMessage($event)"></app-chiled>`,

styleUrls: ['./parent.component.css']

})

export class ParentComponent implements OnInit {

messageParentToChiled = "Parent to parent";

messageChiledToParent:string;

constructor() { }

ngOnInit() {

}

resiveMessage($event){

this.messageChiledToParent=$event;

}

}

Child Component

import { Component, OnInit, Input,Output,EventEmitter } from '@angular/core';

@Component({

selector: 'app-chiled',

template: `<p>

chiled works!

<input type="button" (click)="sendMessage()" value="click me!"/>

</p>

`,

styleUrls: ['./chiled.component.css']

})

export class ChiledComponent implements OnInit {

@Input() messageParentToChiled:string;

MessageChiledToParent: string="chiled to parent";

@Output() messageEvent=new EventEmitter<string>();

constructor() { }

ngOnInit() {

}

sendMessage(){

this.messageEvent.emit(this.MessageChiledToParent);

}

}

data transfer from ParentToChild | Angular 4

Parent Component

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-parent',

template: `<p>

parent works!

</p>

<app-chiled [messageParentToChiled]="messageParentToChiled"></app-chiled>`,

styleUrls: ['./parent.component.css']

})

export class ParentComponent implements OnInit {

messageParentToChiled = "Parent to parent";

constructor() { }

ngOnInit() {

}

}

Child Component

import { Component, OnInit, Input,Output,EventEmitter } from '@angular/core';

@Component({

selector: 'app-chiled',

templateUrl: `<p>

chiled works!Message{{messageParentToChiled}}

</p>`,

styleUrls: ['./chiled.component.css']

})

export class ChiledComponent implements OnInit {

@Input() messageParentToChiled:string;

constructor() { }

ngOnInit() {

}

}