Skip to content

πŸ“‹ App using a DataService with httpClient to get json data from an external API.

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-api-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f8fe2ac Β· Jul 20, 2023

History

31 Commits
Apr 17, 2019
Jul 20, 2023
Jul 20, 2023
Feb 11, 2022
Jul 20, 2023
Apr 17, 2019
Feb 11, 2022
May 19, 2021
Jul 19, 2023
Jul 20, 2023
Jul 19, 2023
Jul 20, 2023
Dec 11, 2022

Repository files navigation

⚑ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

πŸ“„ Table of contents

πŸ“š 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

Example screenshot. Example screenshot.

πŸ“Ά Technologies

πŸ’Ύ 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: gomezbateman@gmail.com