Currency Converter Calculater Using Google Finance API with AngularJS

This Tutorial helps to create a google currency converter app using angular 1.4. Google is providing a finance API to convert one currency to another currency in real-time. You will get real-time information on the currency conversion rate of any country. It’s very easy and helpful to get currency conversion rate information.

The google currency conversion API will take three parameters, one is amount that will convert,from_currency is used for current amount currency type and to_currency is used for desired currency type.

Google has discontinued finance API, So you need to use any free third-party API, I have already shared FastFOREX Alternative: Free Exchange Rate API

It’s very simple, I have tried direct call of Google API from angular HTTP method but getting the CROSS issue, so I have used PHP for wrapper between the angular app and Google currency API.

We will use following files into this application,

• index.html : This file is used for the main entry point of the application, Here we will include all required libraries, js and css files. We’ll create simple HTML layout for enter amount, select from currency and to currency using HTML dropdown.
• app.js : The angularjs application and controller file.
• currency_api.php : The file is used to wrapper between angular and google currency api.

Checkout Other Angular tutorials,

• Simple Pie and Bar Chart Using Google charts with Angularjs
• Simple Example of Angularjs $interval and $timeout
• Simple Example of angular pdf viewer using pdf.js
• How to Use HTML5 Local Storage Using AngularJS

Currency Converter AngularJS app Using Google Converter API

We will create angular application 'test_angular_google_converter_app' folder.Created app.js, currency_api.php and index.html file into this folder. This file will use later on in this application.

We will add the bootstrap and angular libs file into the header of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
 	
<script src="app.js"></script>

Also added app.js file for angular application controller. Created bootstrap form for the end user, so that the user can enter an amount and select amount currency type and select desired currency type.

<fieldset class="scheduler-border"><legend class="scheduler-border">AngularJS Exchange Rate Application</legend><form class="form-inline">
<div class="form-group col-sm-3">
<div class="input-group col-sm-12"><span class="input-group-addon">{{from_currency.symbol_native}}</span> <input id="c2" class="form-control currency" min="0" step="0.01" type="number" value="1" data-number-to-fixed="2" data-number-stepfactor="100"></div>
</div>
<div class="form-group"><label for="exampleInput2">From Currency</label><select class="form-control" style="width: 200px;"></select></div>
<div class="form-group"><label for="exampleInput3">To Currency</label><select class="form-control" style="width: 200px;"></select></div>
<button class="btn btn-primary" type="submit">Convert</button></form></fieldset>

Added submit to send HTTP request to rest API. I have generated select options values using ng-repeat but did not mention where data you will get, yes I will discuss it later on in this tutorial. I will use app.js file to set currency data into scope to render drop-down list.

I have found Currency JSON array, it’s very useful to get all currency data with symbols.

We will create an angular app using the below code.

(function(window, angular, undefined){
	'use strict';
	angular.module('TestApp', []);

	angular.module('TestApp').controller('testController', testController);
	function testController($scope, $http){
	}
})(window, window.angular);

Create TestApp angular module and added testController within it. We have injected in-built $scope and $http services with this angularjs application. We will define HTTP method to get all currency types with their symbol.

$scope.getCurrencyData = function() {
	$http.get("currencies.json")
	.then(function(response){ 
		$scope.all_currency = response.data;
		$scope.from_currency = $scope.all_currency[0];
		$scope.to_currency = $scope.all_currency[3];
		console.log($scope.all_currency);
	});
}
$scope.getCurrencyData();

We have downloaded json file and put into the angular root folder, We have read that file using the HTTP Get method and stored it into $scope.all_currency a variable. Finally called this method to set data.

We will add HTTP method to call google currency converter api using php wrapper.

$scope.from_currency = {};
$scope.to_currency = {};
$scope.amount = 1;
$scope.all_currency = [];
$scope.loaded = false;

$scope.convert_in_currency =  function() {
	$scope.loaded = false;
	var params = {'amount':$scope.amount, 'from':$scope.from_currency.code, 'to':$scope.to_currency.code};
	console.log($scope.amount);
	$http.get("currency_api.php?amount=+"+$scope.amount+"&from="+$scope.from_currency.code+"&to="+$scope.to_currency.code+"")
	.then(function(response){
		console.log(response);
		$scope.loaded = true;
		$scope.results = response.data;

	});
}

We have used currency_api.php a file to convert currency, We will add the below code into currency_api.php file.

$params = $_REQUEST;
//print_R($params);die('fff');
if(isset($params) && isset($params['amount']) && isset($params['from']) && isset($params['from'])) {
    currencyConverter($params['from'], $params['to'], $params['amount']);
}

function currencyConverter($from_currency, $to_currency, $amount) {
    $from_currency = urlencode($from_currency);
    $to_currency = urlencode($to_currency);
    $get = file_get_contents("https://finance.google.com/finance/converter?a=1&from=$from_currency&to=$to_currency");
    $get = explode("",$get);
    $get = explode("",$get[1]);
    $converted_currency = preg_replace("/[^0-9\.]/", null, $get[0]);
    echo $converted_currency;
}

You can download source code and Demo from below link

Conclusion:

We have created an angularjs app to convert currency from one type to another in real time.I have used google currency convert API into this application. You can use other exchange rate API as well like yahoo finance, open-exchange etc.