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

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

General info

• Angular httpClient used to get API data.

Screenshots

.

Technologies

• Angular v8.0.0

• Angular CLI v8.0.1

• RxJS Library v6.5.2 used to subscribe to the API data observable.

Setup

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.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private _http: HttpClient) { }

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

Features

• Angular httpClient used to get data from an external API.

• Updated to latest Angular 8 version with all dependency conflicts resolved.

• simple angular pipe used: {{ user.name | uppercase }} to convert username to uppercase.

Status & To-Do List

• Status: Working.

• To-Do: add mat-cards to improve UI.

Inspiration

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

Contact

Repo created by ABateman - feel free to contact me!