⚡ Angular API User Posts

• App to get user data from an external JSONPlaceholder API.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Angular httpClient used to get API data.

📷 Screenshots

.

📶 Technologies

• Angular v15
• RxJS Library v7 used to subscribe to the API data observable.

💾 Setup

• 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 using httpClient service with a getUser() function to get user details from the API.

export class DataService {
  apiUrl = "https://jsonplaceholder.typicode.com/users";

  constructor(private _http: HttpClient) {}
  //get array of users from API url
  getUsers(): Observable<User[]> {
    return this._http.get<User[]>(this.apiUrl);
  }
}

🆒 Features

• Angular httpClient used to get data from an external API.
• simple angular pipe used: {{ user.name | uppercase }} to convert username to uppercase.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Original tutorial: How to use Angular 7 HttpClientModule with REST API
• Article on HttpClient: Angular Http — Angular 6 HttpClient Tutorial

📁 License

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

✉️ Contact

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