[Fixed] Angular 8+ *ngFor not displaying data in html even though console.log() prints the data correctly


i am trying to display a list of tuitions in a table with separate component for each result in the list using *ngFor, but html is not displaying it.


parent html file

<div class="card">
            <h5 class="p-2 py-3">Find Tuitions By ID</h5>
            <table class="table table-responsive-sm">
                <thead class="thead-light font-weight-bold">
                        <td scope="col">Tuition Id</td>
                        <td scope="col">Tuition Name</td>
                        <td scope="col">Classes</td>
                        <td scope="col">City</td>
                        <td scope="col">Action</td>
                <tbody class="w-100">

                    <tr class="" app-tution-table-list-row *ngFor="let tution of searchedTuitions" [tution]='tution'


child html tution-table-list-row.html file

<td scope="col" class="text-danger">{{tution.tutionId}}</td>
<td scope="col">{{tution.tutionName}}</td>
<td scope="col">{{tution.listOfClasses}}</td>
<td scope="col">{{tution.teacher.city}}</td>
    <div class="row">
       <div class="col-6">
        <button class="button btn btn-sm btn-danger my-1" routerLink="/verification-page"
            [queryParams]="{id: tution.teacher.userId}">View</button>

tution-table-list-row.ts file

  selector: 'app-tution-table-list-row',
  templateUrl: './tution-table-list-row.component.html',
  styleUrls: ['./tution-table-list-row.component.css']
export class TutionTableListRowComponent {
    tution: Tution;
    viewEvent = new EventEmitter();




You are using an element-selector in your TutionTableListRowComponent component. So, if you want to display that component you will have to use:


And not :

<tr app-tution-table-list-row></td>

If you want your component to be used like that, you need to update your selector to be an attribute selector that way (notice the [ ] around the selector) :

  selector: '[app-tution-table-list-row]',
  templateUrl: './tution-table-list-row.component.html',
  styleUrls: ['./tution-table-list-row.component.css']

Here is a link to a similar question in stackOverflow

Leave a Reply

(*) Required, Your email will not be published