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

You can see this live example here on CodeSandbox.

Code

//  app.component.ts
import {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;
}

Axios

You can see this live example here on CodeSandbox.

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

Code

//  app.component.ts
import {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;
}