Untitled

data.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getMainPage() {
    return this.http.get("http://127.0.0.1:8000/main-page/")
  }

  getActivePage() {
    return this.http.get("http://127.0.0.1:8000/serie")
  }
}

main-page.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/data.service';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})

export class MainPageComponent implements OnInit {
  tokens = [];
  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getMainPage().subscribe((res) => {
      return Array(res).push(this.tokens)
    })
    }
  }


main-page.component.html

<router-outlet>
  <div class="mainpage-tokens">
    <div class='token-container' *ngFor="let token of tokens">
          <img src="token.get_image">
        <span class="token-undertitle">
          <span class="title">token.title</span>
          <span class="undertitle">stoken.serie|nºtoken.number|#token.author</span>
        </span>
    </div>
  </div>