Angular

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.

Angular
Axios

You can see this live example here on CodeSandbox.

Code

//  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 = 'https://finalspaceapi.com/api/v0/character?limit=5';  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="{{item.name}}"       />     </div>     <div class="card__body">       <h3>{{item.name}}</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;}

You can see this live example here on CodeSandbox.

Remember to add the Axios dependency to your project and install it.

Code

//  app.component.tsimport {Component} from '@angular/core';import axios from 'axios';
@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})
export class AppComponent {  title = 'Final Space API with Angular';  url = 'https://finalspaceapi.com/api/v0/character?limit=5';  items = [];
  constructor() {
    const listCharacter = async () => {      try {          const res = await axios.get(this.url);
          console.log(`>>> res => `, res);
          if (res.status === 200) {            console.log(`>>> res.data => `, res.data);
            for (const key in res.data){              if (res.data.hasOwnProperty(key)){                console.log('>>> res.data[key] => ', res.data[key]);                this.items.push(res.data[key]);              }            }          }
      } catch (err) {          console.error(err);      }    };
    listCharacter();
  }}

// 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="{{item.name}}"       />     </div>     <div class="card__body">       <h3>{{item.name}}</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;}