⚡ Angular API User Albums

The app is deployed on (https://sil-hosting.web.app/)

• App to get user details and albums 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 Albums
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 📁 License
  • ✉️ Contact

📚 General info

• Angular routing module allows user to navigate between Users and Posts pages.
• Angular httpClient used to get API data.
• Sidebar with Google Material icons and links to pages.
• Tutorial code - see 👏 Inspiration below

📷 Screenshots

.

📶 Technologies

• Angular 16
• RxJS Library v7 used to subscribe to the API data observable.
• Google Material icons used.

💾 Setup

• Run npm install -legacy-peer-deps 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.
• npm run build to create build folder then copy index.html to 404.html
• Github will deploy the docs folder automatically on commit

💻 Code Examples

• data.service.ts using httpClient service with functions to get users, userIds and albums.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  }

  getUser(userId) {
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
  }

  getAlbums() {
    return this.http.get('https://jsonplaceholder.typicode.com/albums')
  }
}

🆒 Features

• Angular httpClient used to get data from an external API.
• Material icons used.
• Updated to latest Angular version with all dependency conflicts resolved.

📋 Status & To-Do List

• Status: Working.
• To-Do:

📁 License

• Open Software License 3.0

✉️ Contact

• Repo created by Clement Lumumba, email: [email protected]