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>