⚡ Angular API DataTable

• Angular app using an Angular DataTables library to display API data in a responsive paginated HTML table with search box
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Angular DataTables library used for building complex HTML tables using DataTables
• REST Countries API v3 endpoint used for country JSON data
• Not possible to use data Observable in HTML with | async because DataTables operates on JASON data so requires subscription to the data Observable.

📷 Screenshots

📶 Technologies

• Angular framework v16
• Angular DataTables library v16
• JQuery plug-in v3
• ColReorder for DataTables v1 for responsive columns

💾 Setup

• Run npm i to install dependencies.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

💻 Code Examples

• app.component.ts functions to fetch data via a separate service and destroy data table trigger

  // get country list and subscribe, new table triggered with new data each RouterTestingModule
  getCountryList = (url: string): void => {
    this.countryService
      .fetchCountryList(url)
      .subscribe((data: CountryListInterface[]) => {
        this.countries = data;
        this.dtTrigger.next(data);
      });
  };

  // Table data unsubscribed in OnDestroy lifecycle
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

🆒 Features

• All table formatting, responsiveness, sorting etc. is taken care of - saves a lot of time

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Angular DataTables documentation

📁 License

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

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com