AndrewJBateman / angular-api-project

:clipboard: App using a DataService with httpClient to get json data from an external API.

⚡ Angular API Project

• App using a DataService with httpClient to get a JSON Observable data stream from an API and display it using the Angular async pipe.
• App also submits a simple typed Contact form.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Routing module allows user to navigate between Home, About and Contact pages.
• API json/image data displayed: firstname, lastname, email and avatar.
• Angular FormBuilder used to allow user to submit a form with name and message. Form uses validation.
• Styling is pure SCSS

📷 Screenshots

. .

📶 Technologies

• Angular v16
• RxJS Library v7 used to subscribe to the API data observable.
• The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.

💾 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.

💻 Code Examples

• data.service.ts ES6 arrow function to return observable from API using apiResponse interface

getUsers = (): Observable<apiResponse> => {
  return this.http.get<apiResponse>("https://reqres.in/api/users");
}

• home.component.ts ng init. function to get observable data for the template async pipe - note: using an ES6 arrow function here would result in nothing being displayed, due the use of 'this'

ngOnInit () {
  this.users$ = this.data.getUsers();
};

🆒 Features

• API web link could be changed to get different and more complex data.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing.

👏 Inspiration

• This was originally a Gary Simon tutorial but it is no longer available on-line. Here is a link to his website: designcourse.com - worth a look

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [e-mail]