javascriptangularangular-servicesangular-template

Data from Angular Service is not provided in template after passing from service


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


Solution

  • Here is a working example to help you understand the implementation of this.

    Few notes:

    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);
    

    stackblitz