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..

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

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).

Israel’s anthem object

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 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).

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.

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.

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.

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.

AppModule

Now, just put it all together by registering the service, component and tokens providers in the AppModule.

The app module

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.