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

Issue

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:

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

stackblitz

Answered By - Naren Murali