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.

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;
}
Last updated on by Ashutosh