article This 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 (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. ISO 3166–1 alpha-2 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 and a 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. full data structure country example Languages Data Structure Each language data contains the full language name, speaker (if the native language speaker exists in the service), alternative speaker and speaker gender restriction. It will be covered in a future article. responsivevoice.js Some languages objects You can see the and a in the GitHub repository readme file. full data structure country example 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 and a in the GitHub repository readme file. full data structure country example 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 is an improved version of Angular v2 OpaqueToken ( ). It allows us to create string-based tokens without running into any collisions in the dependency injection mechanism. Creating an InjectionToken is easy. InjectionToken one of the changes in v4 We use three injection tokens, for countries, languages, and anthems. After creating the tokens, we can create providers with the option. useValue Data tokens and tokens providers Data Access Service After creating the providers we can inject the data with 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. @Inject The data access service The methods supply the data by a2 codes. In the , 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 is a little bit tricky, because of the structure of the country’s native name object. For example, here is the Israel (IL) object. getCountryObjByA2 getCountryNativeName 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 lifecycle hook asks for the countries alpha2 codes for the select box. In addition, it calls the method with the default country a2 (IL). When the user chooses another a2, the select box calls with the new a2. Then the a2 is being saved and the country’s details fetched by the service. ngOnInit onA2Changed onA2Changed Component Html The view contains the a2 codes select box. The selected a2 bind by the directive and when the new a2 is being selected, the output calls the handler. The second part contains the country’s details. ngModel ngModelChange Part of the app component html As we can see the view uses directive for optional properties. There is also a link to the anthem and a Wikipedia icon link to the country’s page. ngIf 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.
