⚡ Angular Api Countries

• Angular dev app that displays details about countries using data from the Rest Countries API.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Api Countries
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Uses the model-view-viewmodel (MVVM) of Angular to bind the remote data that is stored in objects in the application template. The component plays the part of the controller/viewmodel. The template represents the view.
• Basic app that gets API country data and displays it in a flex grid

📷 Screenshots

.

📶 Technologies

• Angular v15
• Angular HttpClient module used to communicate with back-end services via the XMLHttpRequest browser interface.
• Angular KeyValuePipe to transform Object or Map into an array of key value pairs. Output array ordered by keys.
• RxJS Library v7 used to subscribe to the API data observables.
• Angular Material Design v15 used for the user interface, especially mat-menu, mat-sidenav, mat-card etc.
• restcounties API v3 information about countries via a RESTful API. Note their latest endpoints used - they changed from .eu to .com and REST JSON format changed

💾 Setup

• Run npm i to install dependencies.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app does automatically reload if you change any of the source files.
• Run npm run build to create build files in docs folder. These will be deployed to github-pages. You need to copy the index.html file in the docs folder and paste it in the same folder with a new name of 404.html.

💻 Code Examples

• extract from data.service.ts to get country data using Angular httpClient module.

  // function to get info for all countries
getCountries() {
  return this.http
    .get(`${this.API_URL}/all`)
    .pipe(map(
      result => this.result = result
    ));
}

🆒 Features

• Angular httpClient used to get data from an API - no API key is required.

📋 Status & To-Do List

• Status: Working. Menu links do not work
• To-Do: Add user search of country etc. Menu

👏 Inspiration

• Stackoverflow: access key and value of object using *ngFor to access key-value pairs from API data for currencies etc.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]