I’m trying to display data using a parent to child relationship with Angular, however I am having issues and am not sure why. I’m trying to display an array of Employee objects, but when I run the webpage on localhost, it displays it as:
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
The goal is to inject an Employee service into my EmployeeList componet (parent) and display it using DisplayEmployee (child) component. I can see the data I want being passed through in the console, but not on the webpage. How can I fix this issue, and why does it not recognize the data I’m trying to pass through?
Employee class:
export class Employee {
private _firstName: string;
private _lastName: string;
private _salary: number;
private _department: string;
constructor(firstName: string, lastName: string, salary: number, department: string) {
this._firstName = firstName;
this._lastName = lastName;
this._salary = salary;
this._department = department;
}
get firstName(): string {
return this._firstName;
}
get lastName(): string {
return this._lastName;
}
get salary(): number {
return this._salary;
}
get department(): string {
return this._department;
}
}
Employee Service:
import { Injectable } from '@angular/core';
import {Employee} from "./employee";
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
private _employees: Employee[];
constructor() {
this._employees = [];
this.populateEmployees();
}
private populateEmployees(): void {
this._employees.push(new Employee("Kyle", "Ryan", 250_000, "Management"));
this._employees.push(new Employee("John", "Smith", 50_000, "Human Resources"));
this._employees.push(new Employee("Nicole", "Berg", 200_000, "Management"));
this._employees.push(new Employee("Bryan", "Jones", 90_000, "Customer Support"));
this._employees.push(new Employee("Sarah", "Little", 50_000, "Customer Support"));
}
get employees(): Employee[] {
return this._employees;
}
}
EmployeeList component (parent):
import { Component, OnInit } from '@angular/core';
import {EmployeeService} from "../services/employee.service";
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
private _allEmployees: any;
constructor(private employeeService: EmployeeService) { }
ngOnInit(): void {
this._allEmployees = this.employeeService.employees;
}
get allEmployees(): any {
return this._allEmployees;
}
}
DisplayEmployee component (child):
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-display-employee',
templateUrl: './display-employee.component.html',
styleUrls: ['./display-employee.component.css']
})
export class DisplayEmployeeComponent implements OnInit {
@Input() list: any = "";
constructor() { }
ngOnInit(): void {
}
}
EmployeeList component template:
<app-display-employee [employeeList]=allEmployees></app-display-employee>
DisplayEmployee component template:
<div>
<table>
<tr *ngFor="let emp of employeeList;">
<td>{{ emp }}</td>
</tr>
</table>
</div>
