andrewjbateman / angular-bootstrap-info

:clipboard: Angular app to get API data and display it using Bootstrap styles

⚡ Angular Bootstrap Info

• Angular app to show mediastack Global News Data API data in a Bootstrap card array
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Free news from the mediastack REST API supplied in JSON format
• take(1), tap() and map() methods used to extract API data.
• Angular Async subscribe pipe used directly with the news response observable in the html template as it is auto-unsubscribing, instead of an observable subscription.

📷 Screenshots

📶 Technologies

• Angular v16
• Reactive Extensions Library for Javascript RXJS v7
• Bootstrap v5
• Live Server

💾 Setup

• Install dependencies using npm i
• Get an API key using Mediastack Quickstart
• Add API_KEY to environment.ts files
• 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. Note: This will not work with Mediastack due to restrictions using http. See this Stackoverflow for ways around HTTP restriction. I created a build file then opened index.html using Live Server.
• 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

• info.service.ts HTTP request returns an observable data stream that I tapped using console.log

    return this.http.get<ApiResponse>(apiUrl).pipe(
      take(1),
      map(res => res['data']),
      catchError(err => {
        throw 'an error occured: ' + err;
      }),
    );

🆒 Features

• Use of Angular async pipe in HTML template reduces amount of code and auto-unsubscribes from the news data observable

📋 Status & To-Do List

• Status: Working
• To-Do: Add transloco, images? Change API? Add pagination??. Add click to data detail page.

👏 Inspiration

• mediastack REST API
• Stackoverflow for ways around HTTP restriction

📁 License

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

✉️ Contact

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