Angular Material API

• Angular Progressive Web App (PWA) to display crypto currency information from a REST API using Angular Material
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• To generate a component with module and routing: ng g m my-page --routing=true && ng g c my-page -m=my-page
• The Home page displays a list of crypto news.
• The cryptos.service.ts files uses the RxJS operator take(1) which just takes the first value and completes. No further logic is involved. If there is no data then take(1) simply returns nothing.
• The News Detail page displays the crypto news item the user has clicked on.
• New Angular image directive NgOptimizedImage used for loading News Detail page image
• Convention for Typescript variable names: _example = private variable, _crypto$ = private observable
• Seems like you do not need the API key to get news from the CryptoCompare API

📷 Screenshots

📶 Technologies

• Angular v16
• Angular Service Workers v16 added for Progressive Web App functionality
• http-server command line http server to test PWA
• RxJS v7 operators for async observable streams

💾 Setup

• Install dependencies using npm i
• 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 build the project with PWA. The build artifacts will be stored in the dist/angular-material-api directory.
• Add defer to dist/angular-material-api/browser/index.html to make loading of styles asynchronous, e.g. <link rel="stylesheet" href="styles.d6d9df648b6debafe22a.css" defer>
• npm i -g http-server to globally install a http server to run the PWA with service workers
• http-server -p 8080 -c-1 dist/angular-material-api/browser then open either link to view on a dev server
• ng update to update Angular

💻 Code Examples

• cryptos.service.ts gets crypto price data as an Observable from an API using the RxJS take(1) method for auto-unsubscribe

  constructor(private _http: HttpClient, private router: Router) {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('authorization', environment.cryptoApiKey);

    this._cryptoNews$ = this._http
      .get<CryptoNewsApiResponse>(this._cryptosApiUrl, { headers })
      .pipe(
        take(1),
        tap((res: CryptoNewsApiResponse) => {
          console.log('API status message: ', res.Message);
        }),
        map((res: CryptoNewsApiResponse) => res.Data),
        catchError((err) => {
          throw "error in getting API data. Details: " + err;
        })
      );
  }

  get cryptoNews$(): Observable<CryptoNews[]> {
    return this._cryptoNews$;
  }

🆒 Features

• Lazy-loading of all modules

📋 Status & To-Do List

• Status: Working app with 93% lighthouse score and 100% accessibility, Best Practises, SEO. PWA not working.
• To-Do: Fix PWA. Add News detail back button
• To-Do: Add Apple Touch Icon. Correct image sizing on Home page, add nav menu about and contact page.
• To-Do: Add more crypto info pages.

👏 Inspiration

• Typescript documentation
• Material Theming

📁 License

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

✉️ Contact

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