⚡ Angular ChatGPT App

• Angular app to Create-Read-Update-Delete (CRUD) items from a MockAPI endpoint, created mostly using ChatGPT_4
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

ChatGPT commands used:

• "I have an Angular app and I want to create a CRUD with fake mockapi. Can you help?" - explained how to generate a new Angular16 app, create an API service but missed the items component and missed adding the HttpClientModule to app.module.ts. ChatGPT did not say whether routing was required or what styles menu choice to make, or that the HTML placeholder text had to be removed etc...Did not use Angular async pipe to display async Observable data directly in template. I added the typescript model interface Item myself.
• "I have an Angular app and I want to create a CRUD with fake mockapi. Can you produce the code, as well as the HTML." - produced the items component but unfinished HTML for edit and delete.
• "Can you produce just the HTML to edit and delete items from the mockapi." - produced the complete Item List HTML
• "I get an error "Can't bind to 'ngModel' since it isn't a known property of 'input'." with the HTML line [(ngModel)]="newItem.name". Do you know how to fix it?" - told me to add the FormsModule to app.module.ts

📷 Screenshots

• 

📶 Technologies

• Angular v16
• RxJS v7 Reactive Extensions Library for JavaScript
• MockAPI.io - you will need to sign in and create a project

💾 Setup

• Install dependencies using npm i
• 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 ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
• Run ng update to update Angular

💻 Code Examples

• methods from items.component.ts to get all items and add an item.

  getItems(): void {
    this.mockApiService.get('items').subscribe((response) => {
      this.items = response;
    });
  }

  addItem(): void {
    this.mockApiService.post('items', this.newItem).subscribe((response) => {
      this.items.push(response);
      this.newItem = {};
    });
  }

🆒 Features

• Minimal code to produce CRUD functionality

📋 Status & To-Do List

• Status: Working
• To-Do: Get ChatGPT to add styling

👏 Inspiration

• Youtube Domini Code - in Spanish

📁 License

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

✉️ Contact

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