Angular v4: Practical Countries Application
This article originally appeared on dormoshe.io
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.
You can play with the demo application.
Installation
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..
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.
You can see the full data structure and a country example in the GitHub repository readme file.
Anthems Data Structure
Each anthem data contains a link for online audio anthem file and the source of the file (like Wikimedia).
You can see the full data structure and a country example in the GitHub repository readme file.
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.
Tokens Creation
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 useValue
option.
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 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.
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).
Component Class
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.
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.
Component Html
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.
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.
AppModule
Now, just put it all together by registering the service, component and tokens providers in the AppModule.
References
Here are some useful links:
- The demo application.
- Examples code project in a GitHub repository
- countries-data GitHub repository
- countries-data npm
- Projects that use this npm: ng2-pipes & ng2-countries
You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.