Skip to main content


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.tsimport {Component} from '@angular/core';import {HttpClient} from '@angular/common/http';
@Component({  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)){          this.items.push(data[key]);        }      }    });  }}
// app.component.html<h1> {{title}}</h1>
<div class="cont-cards"> <div *ngFor="let item of items" class="card">   <div class="card shadow--tl">     <div class="card__image">       <img         height="300px"         src="{{item.img_url}}"         alt="{{}}"       />     </div>     <div class="card__body">       <h3>{{}}</h3>       <small>{{item.status}}</small>     </div>   </div> </div></div>
/* app.component.css*/.cont-cards{ 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;}