⚡ Angular API Data

• Angular app to fetch API data and display it in a table using RxJS observables
• Create, Read, Update & Delete (CRUD) operations can be carried out on a table of data fetched from the JSONPlaceholder API
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Displays table of API data with CRUD actions using the JSONPlaceholder API
• Angular folder structure best practises followed with CRUD service and data pipe in their own folders.
• Bootstrap form used with search filter

📷 Screenshots

📶 Technologies

• Angular v16 Javascript framework
• Bootstrap v5
• RxJS v7 Reactive Extensions Library for JavaScript
• JSONPlaceholder API

💾 Setup

• Install dependencies using npm i
• Run ng serve for a dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes

🔧 Testing

• Run ng test to run Jasmine unit tests via Karma
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• data.service.ts function to get data arry from API

  getData(): Observable<Data[]> {
    return this.http.get(this.baseUrl).pipe(
      map((response: any) => {
        return response;
      })
    );
  }

🆒 Features

• Can be connected to a backend database

📋 Status, Testing & To-Do List

• Status: Working but some erors
• To-Do: Move add & edit data code to their own components with navigation, connect database. Remove [ngModel] and fix 2x filter errors that appear in localhost console. Add form types

👏 Inspiration

• Tektutorialshub: Angular Folder Structure Best Practices

📁 License

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

✉️ Contact

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