Invisible cards in Angular using rawg api

Published

I am trying to get cards to display on my home page for 20 games. But not a singular card shows up at all. If I remove the data interpolation then a card shows up. I’m trying to get the data from the rawg api.

card html

  <div class="row">
  <div class="col-md-3" *ngFor="let game of games">
    <div class="card text-white bg-dark">
      <img src="{{ game.background_image }}" class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">{{ game.name }}</h5>
        <p class="card-text">
          With supporting text below as a natural lead-in to additional content.
        </p>
        <a href="#" class="btn btn-success">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

card ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RawgDataService } from 'src/app/services/rawg-data.service';

@Component({
  selector: 'app-game-cards',
  templateUrl: './game-cards.component.html',
  styleUrls: ['./game-cards.component.css']
})
export class GameCardsComponent implements OnInit {

  public games: any = [];

  constructor(private rawgDataService: RawgDataService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.rawgDataService.getGames().subscribe( response => {this.games = response.data;})
  }

}

app html

<app-navbar></app-navbar>
<app-game-cards></app-game-cards>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="card bg-dark my-5">
        <div class="card-body">
          <h2 class="card-title text-center text-white py-3">{{ title }}</h2>
          <ul class="text-center list-inline py-3">
            <li class="list-inline-item">
              <a routerLink="users" class="btn btn-info">List Users</a>
                </li>
            <li class="list-inline-item">
              <a routerLink="/adduser" class="btn btn-info">Add User</a>
                </li>
          </ul>
        </div>
        
      </div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

rawg angular service – I’m the most unsure about this portion of the code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RawgDataService {

  private ENDPOINTS = {
    GAME_LIST_URL: 'https://rawg.io/api/games?page=1&page_size=20&key=6d9368c98b03417d9a0cab226f150dc0'
  }

  constructor(private http: HttpClient) { }

  getGames(): Observable<any>{
    return this.http.get<any>(this.ENDPOINTS.GAME_LIST_URL);
  }
}

Source: Angular Questions

Published
Categorized as angular Tagged

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq