I have been developing an application using Angular 8.
The employee-list component is responsible for presenting data in a table format.
Within the employee-list.component.ts file, I have defined:
import { Component } from '@angular/core';
import { Employee } from '../../models/empModel';
import * as data from '../../data/employees';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css'],
})
export class EmployeeListComponent {
public displayMode: String = 'grid';
public deptno: number = -1;
public empsArray: Employee[] = data.employees;
public removeEmployee(empno: number) {
this.empsArray = this.empsArray.filter((item) => item.empno != empno);
}
public filterByDepartment(num: number) {
this.deptno = num;
}
public setDisplayMode(mode: String) {
this.displayMode = mode;
}
}
In the view:
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Full Name</th>
<th>Job</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of empsArray | filter: deptno">
<app-employee-table-item
[employee]="employee"
></app-employee-table-item>
</tr>
</tbody>
</table>
</div>
Each row in the table is handled by a child component called employee-table-item:
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Employee } from '../../models/empModel';
@Component({
selector: 'app-employee-table-item',
templateUrl: './employee-table-item.component.html',
styleUrls: ['./employee-table-item.component.css'],
})
export class EmployeeTableItemComponent {
@Input() employee: Employee;
}
The Issue
The table layout is incorrect because each row is enclosed in an unnecessary
<app-employee-table-item></app-employee-table-item>I aim to display the content of every table row directly within the <tr> tag while preserving the template in a separate HTML file.
Query
What is the most effective approach to displaying the contents of each table row directly inside the <tr> tag?