Below you will find two ways to implement the Final Space API in Angular, one with the same Angular tools and the other with Axios. And never miss ๐Ÿช in your cupboard.

You can see this live example here on CodeSandbox.

// app.component.ts
import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http';
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
export class AppComponent {
title = 'Final Space API with Angular';
url = '';
items = [];
constructor(private http: HttpClient) {
this.http.get(this.url).toPromise().then(data => {
console.log(`>>> data => `, data);
for (const key in data){
if (data.hasOwnProperty(key)){
// app.component.html
<div class="cont-cards">
<div *ngFor="let item of items" class="card">
<div class="card shadow--tl">
<div class="card__image">
<div class="card__body">
/* app.component.css*/
display: flex;
flex-wrap: wrap;
padding-left: 0;
.card {
margin: 20px;
justify-content: space-around;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
.shadow--tl {
box-shadow: 0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1) !important;
.card__body, .card__footer, .card__header {
padding: 15px;
Last updated on by Ashutosh