Running AngularApp dependent on API data

I had a bug where my application needed currency conversion data to change the currencies via angular PIPES. Pipes has advantages of changing the currencies at front end while disadvantage of Independency from basic component rendering.

My component renders so quickly.

My pipes needed currency conversion data from a service. So it was showing blank for the first time if he don’t get the currency data at the very beginning.

Put the below code in app.component.ts

constructor(){
public ts:TranslateService
}
async ngOnInit(){
await Promise.all([
this.ts.getCurrencies().toPromise()
]);
// Waiting for Parellel Promises to be resolved first
}

 

 

// currency-display.pipe.js

import { Pipe, PipeTransform } from ‘@angular/core’;
import { TranslateService } from ‘../lang/translate.service’;

@Pipe({
name: ‘currencyDisplay’
})
export class CurrencyDisplayPipe implements PipeTransform {
constructor(
private ts:TranslateService
){

}

transform(value: any, args?: any): any {
let currentRate = this.ts.currencyRates[‘EUR’+args];
return this.ts.currency.symbol+(value*currentRate).toFixed(2);
}

}

My translate service has

currencyRates:any;
currency:any={symbol:’€’,code:’EUR’};

getCurrencies(){
let sub = this.admin.post(‘getCurrencyConversion’,{});
sub.subscribe(res=>{
console.log(‘getCurrencyConversion’,res);
this.currencyRates = res[‘data’][0][‘EUR’];

},error=>{
console.log(error);
});
return sub;
}

for getting currency data.

currencyRates will be which my pipe needed to convert into other.

Refer https://currencylayer.com/ for daily free currency conversion apis upto 250 req. Store it into your own database and it can be used for a day long. You might need to convert it into EURUSD as it provides USDEUR i also coded this for the same to convertion

// data is the currencyLayer api response.
// data = {
// “success”:true,
// “terms”:”https:\/\/currencylayer.com\/terms”,
// “privacy”:”https:\/\/currencylayer.com\/privacy”,
// “timestamp”:1575475747,
// “source”:”USD”,
// “quotes”:{
// “USDAED”:3.67297,
// “USDAFN”:78.68526,
// “USDALL”:110.74889
// }
// }

dataConverted:any={};
usdToCur=0;
curToUsd=0;

convert(currencyCode){
this.usdToCur = this.data.quotes[‘USD’+currencyCode];
this.curToUsd = 1/this.usdToCur;
[‘INR’,’USD’,’EUR’,’CAD’].forEach(item=>{
this.dataConverted[currencyCode+item] = this.curToUsd * this.data.quotes[‘USD’+item];
})
}

This will give you below output rates from EUR to other.

{
“EURAED”:4.07444870884728,
“EURAFN”:87.13034763510515,
“EURALL”:123.62471270742745,
“EURAMD”:530.2375831928299,
“EURANG”:1.9028174638388498,
“EURAOA”:528.2805694826515,
“EURARS”:66.54084435176146,
“EURAUD”:1.628143579732008,
“EURAWG”:1.9966279172952346,
“EURAZN”:1.8849531901677166,
“EURBAM”:1.957572765995208,
“EURBBD”:2.2402575650013308,
“EURBDT”:94.19290753394267,
“EURBGN”:1.955547297896885,
“EURBHD”:0.41828023782056967,
“EURBIF”:2079.820747182536,
“EURBMD”:1.1092377318306859,
“EURBND”:1.5085200550181914,
“EURBOB”:7.672331174017215,
“EURBRL”:4.596460422397728,
“EURBSD”:1.109518368976839,
“EURBTC”:0.00015307480699263464,
“EURBTN”:78.69419424971159,
“EURBWP”:12.047139275889608,
“EURBYN”:2.3431870618510957,
“EURBYR”:21741.05954388144,
“EURBZD”:2.2361910994764393,
“EURCAD”:1.4677655515130001,
“EURCDF”:1863.5195469873104,
“EURCHF”:1.0928542905315466,
“EURCLF”:0.03131932735823942,
“EURCLP”:864.2038778951104,
“EURCNY”:7.802820791552044,
“EURCOP”:3795.9557192297452,
“EURCRC”:630.5553842399503,
“EURCUC”:1.1092377318306859,
“EURCUP”:29.394799893513174,
“EURCVE”:110.86858971514773,
“EURCZK”:25.51036249889076,
“EURDJF”:197.1339460023072,
“EURDKK”:7.473145354512378,
“EURDOP”:58.95599099298961,
“EURDZD”:132.74801224598454,
“EUREGP”:17.924615094507054,
“EURERN”:16.63867135504481,
“EURETB”:35.048582394178716,
“EUREUR”:0.9999999999999999,
“EURFJD”:2.4372726062649743,
“EURFKP”:0.901677167450528,
“EURGBP”:0.8420279084213328,
“EURGEL”:3.2388000266217056,
“EURGGP”:0.8419458248291773,
“EURGHS”:6.311363031324873,
“EURGIP”:0.901677167450528,
“EURGMD”:56.84874767060076,
“EURGNF”:10454.565537092909,
“EURGTQ”:8.510075206318218,
“EURGYD”:232.12390185464548,
“EURHKD”:8.681837341379003,
“EURHNL”:27.453737021918535,
“EURHRK”:7.436948708847279,
“EURHTG”:107.78961087940367,
“EURHUF”:331.0850607862277,
“EURIDR”:15525.445913568195,
“EURILS”:3.8547142603602804,
“EURIMP”:0.8419458248291773,
“EURINR”:78.61169913035761,
“EURIQD”:1319.9929008785161,
“EURIRR”:46704.45481076404,
“EURISK”:134.8606497914633,
“EURJEP”:0.8419458248291773,
“EURJMD”:155.91374567397284,
“EURJOD”:0.7864772828112521,
“EURJPY”:120.55583902742035,
“EURKES”:112.58691210400212,
“EURKGS”:77.47892559233294,
“EURKHR”:4514.04065910906,
“EURKMF”:493.1393579732008,
“EURKPW”:998.3310298163102,
“EURKRW”:1322.2891738397373,
“EURKWD”:0.3368422220250244,
“EURKYD”:0.9246317330730321,
“EURKZT”:428.976129204011,
“EURLAK”:9854.467755568374,
“EURLBP”:1678.2768513177743,
“EURLKR”:200.9623968408909,
“EURLRD”:209.36912769544767,
“EURLSL”:16.28409574940101,
“EURLTL”:3.2752906202857393,
“EURLVL”:0.6709668116070636,
“EURLYD”:1.5584801224598455,
“EURMAD”:10.714679652143046,
“EURMDL”:19.24793903629426,
“EURMGA”:4009.894676768125,
“EURMKD”:61.614860457893336,
“EURMMK”:1672.051206850652,
“EURMNT”:3034.6206096370574,
“EURMOP”:8.943512068506521,
“EURMRO”:395.9973333924927,
“EURMUR”:40.6569837607596,
“EURMVR”:17.13732695891383,
“EURMWK”:804.1974842488241,
“EURMXN”:21.32160129558967,
“EURMYR”:4.616089493300204,
“EURMZN”:70.85806970449906,
“EURNAD”:16.283881666518766,
“EURNGN”:401.01195536427366,
“EURNIO”:37.71434133463484,
“EURNOK”:10.166951371017836,
“EURNPR”:125.9108727482474,
“EURNZD”:1.6951481941609725,
“EUROMR”:0.42703877895110476,
“EURPAB”:1.109518368976839,
“EURPEN”:3.7564346880823494,
“EURPGK”:3.765829931670955,
“EURPHP”:56.26663634750199,
“EURPKR”:172.04256256100805,
“EURPLN”:4.287813914278107,
“EURPYG”:7134.188816665187,
“EURQAR”:4.03845727216257,
“EURRON”:4.78059277664389,
“EURRSD”:117.51824474221314,
“EURRUB”:70.48473910728546,
“EURRWF”:1020.498713284231,
“EURSAR”:4.159741325760937,
“EURSBD”:9.174930118022894,
“EURSCR”:15.195872526399857,
“EURSDG”:50.053788046854194,
“EURSEK”:10.540431715325226,
“EURSGD”:1.5075317241991302,
“EURSHP”:1.4651887922619575,
“EURSLL”:10815.067564779483,
“EURSOS”:642.2483960422397,
“EURSRD”:8.272697222468718,
“EURSTD”:23916.041796077734,
“EURSVC”:9.707643757210045,
“EURSYP”:571.2572244653473,
“EURSZL”:16.28401810275978,
“EURTHB”:33.61455652675481,
“EURTJS”:10.743621883041971,
“EURTMT”:3.8823320614074004,
“EURTND”:3.16188215458337,
“EURTOP”:2.556463528263377,
“EURTRY”:6.435081861744608,
“EURTTD”:7.502259517259738,
“EURTWD”:33.787136170023956,
“EURTZS”:2549.6792106664298,
“EURUAH”:26.242667938592596,
“EURUGX”:4085.9383075250685,
“EURUSD”:1.1092377318306859,
“EURUYU”:41.845164832726944,
“EURUZS”:10571.035449019433,
“EURVEF”:11.078515174372171,
“EURVND”:25703.81134084657,
“EURVUV”:129.66203855710356,
“EURWST”:2.9462208270476524,
“EURXAF”:656.6186440677966,
“EURXAG”:0.06670512024137012,
“EURXAU”:0.0007576093708403584,
“EURXCD”:2.99777043215902,
“EURXDR”:0.8046099920134883,
“EURXOF”:657.7780470760492,
“EURXPF”:119.96422264619753,
“EURYER”:277.6976306682048,
“EURZAR”:16.46419602449197,
“EURZMK”:9984.472473156446,
“EURZMW”:17.120807081373677,
“EURZWL”:357.17455075871857
}