The countries-data project supplies JSON data about countries general details, languages, and anthems. This project hosted in a GitHub repository and published in npm. The data stored in typescript files and ready to use in your projects.
In this article, we will review the country data structures, see examples and show how to use it via an Angular v4 application. Furthermore, we will learn how to use InjectionToken.
npm install countries-data
ISO 3166–1 alpha-2 codes
The countries data is based on ISO 3166–1 alpha-2
(a2, in this article) countries codes. The a2 codes are two-letter country codes defined in ISO 3166-1, part of the ISO 3166 standard published by the International Organization for Standardization (ISO), to represent countries, dependent territories, and special areas of geographical interest. They are the most widely used of the country codes published by ISO and are used most prominently for the Internet’s country code top-level domains.
Countries Data Structure
Each country’s data contains a lot of details like the country’s name (common, official, native), resident, capital, other codes, languages, country’s name translations, geo data (longitude, latitude, continent, region, area, borders countries), dialing info, population, Wikipedia link, etc..
Part of Israel’s object
You can see the full data structure
and a country example
in the GitHub repository readme file. In the real life, such amount of data is usually being saved in a database, but for our mini application we can go wild.
Languages Data Structure
Each language data contains the full language name, speaker (if the native language speaker exists in the responsivevoice.js
service), alternative speaker and speaker gender restriction. It will be covered in a future article.
Some languages objects
Anthems Data Structure
Each anthem data contains a link for online audio anthem file and the source of the file (like Wikimedia
Israel’s anthem object
Code examples: Angular 4 application
In order to show the use of the countries-data npm I built an application using Angular v4. This application initialized by Angular-CLI and uses bootstrap and font-awesome.
After installing the npm we want to access the data of the countries and this can be done by v4 InjectionToken
. InjectionToken is an improved version of Angular v2 OpaqueToken (one of the changes in v4
). It allows us to create string-based tokens without running into any collisions in the dependency injection mechanism. Creating an InjectionToken is easy.
We use three injection tokens, for countries, languages, and anthems. After creating the tokens, we can create providers with the
Data tokens and tokens providers
Data Access Service
After creating the providers we can inject the data with
@Inject annotation in the constructor of our service. Here is our data access service. His role is to be a data access layer. We can see the injection of the tokens in his constructor.
The data access service
The methods supply the data by a2 codes. In the
getCountryObjByA2, we can see how to retrieve a specific country’s object by a2. It’s simple. After fetching the object, we can access his properties like wikiLink, area, population, capital etc. The
getCountryNativeName is a little bit tricky, because of the structure of the country’s native name object. For example, here is the Israel (IL) object.
The name part of Israel country object
A country can have more than one native name according to the common language. The method in the next part uses the first language in the object (for IL it’s heb).
So we have a service that exposes what we need. So let’s use it to draw our component. It contains a select box for the a2 codes and details about the selected country.
Part of the app component class
As we can see, the data access service is injected to the component. The
ngOnInit lifecycle hook asks for the countries alpha2 codes for the select box. In addition, it calls the
onA2Changed method with the default country a2 (IL). When the user chooses another a2, the select box calls
onA2Changed with the new a2. Then the a2 is being saved and the country’s details fetched by the service.
The view contains the a2 codes select box. The selected a2 bind by the
ngModel directive and when the new a2 is being selected, the
ngModelChange output calls the handler. The second part contains the country’s details.
Part of the app component html
As we can see the view uses
ngIf directive for optional properties. There is also a link to the anthem and a Wikipedia icon link to the country’s page.
Now, just put it all together by registering the service, component and tokens providers in the AppModule.
The app module
Here are some useful links: