After creating an API Backend with Django i tried to get an Angular Component to display the data provided to create a list of all fetched datasets.
I was able to get an test in service.spec.ts running and i got validated that the data is correctly fetched from the backend
I am struggling a bit with angular v.17 syntax so maybe the problem is quite simple.
Here is the code:
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProjectDashboardService } from './project-dashboard.service' ; // Updated import path
import { Project } from './project.model'; // Updated import path
@Component({
selector: 'app-project-dashboard',
standalone: true,
imports: [CommonModule],
//templateUrl: './project-dashboard.component.html',
template:`
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Projekte</h5>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Projektname</th>
<th>Beschreibung</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<ng-template ngFor let-project [ngForOf]="projects">
<td>{{project.project_name}}</td>
<td>{{project.project_description}}</td>
<td>{{project.project_level}}</td>
</ng-template>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
`,
styleUrl: './project-dashboard.component.scss',
providers: [ProjectDashboardService] // Updated provider
})
export class ProjectDashboardComponent implements OnInit {
projects!: Project[]; // Updated type
projectDashboardService: ProjectDashboardService; // Declare projectDashboardService property
constructor(projectDashboardService: ProjectDashboardService) {
this.projectDashboardService = projectDashboardService; // Assign projectDashboardService in the constructor
}
ngOnInit() {
this.projectDashboardService.getProjectDashboardList()
.subscribe(projects => this.projects = projects);
}
}
in the end i would like to get an responsive page that shows all current projects fetched
Here is a working example to help you understand the implementation of this.
Few notes:
If you do private projectDashboardService: ProjectDashboardService
it is the short form of what you have in your existing code, no need to initialize the variable and then set the value!
The tr
(row) should be used for *ngFor
because else it will be just a list of cells (td
) without having their own separate rows
You can just initialize the service in the providers, but you can also use providedIn: root
so that the service is accessible to all parents if that is your requirement
main.ts
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { CommonModule } from '@angular/common';
import { ProjectDashboardService } from './project-dashboard.service';
export interface Project {
project_name: string;
project_description: string;
project_level: string;
}
@Component({
selector: 'app-root',
standalone: true,
providers: [ProjectDashboardService],
imports: [CommonModule],
template: `
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Projekte</h5>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Projektname</th>
<th>Beschreibung</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let project of projects; trackBy trackByFn">
<td>{{project.project_name}}</td>
<td>{{project.project_description}}</td>
<td>{{project.project_level}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
`,
})
export class App {
projects!: Project[]; // Updated type
constructor(private projectDashboardService: ProjectDashboardService) {}
ngOnInit() {
this.projectDashboardService
.getProjectDashboardList()
.subscribe((projects) => (this.projects = projects));
}
trackByFn(index: number, item: Project) {
return item.project_name;
}
}
bootstrapApplication(App);