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

Issue

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.

• console.log() prints the data(list of tuitions) correctly :
  console log data
• Also the elements tab in inspect shows generated tr :
  inspect element tab result
• But html is not displaying the list : empty table

Code:

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">
                    <tr>
                        <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>
                    </tr>
                </thead>
                <tbody class="w-100">

                    <tr class="" app-tution-table-list-row *ngFor="let tution of searchedTuitions" [tution]='tution'
                        (viewEvent)='viewEvent($event)'>
                    </tr>

                </tbody>
            </table>
        </div>

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>
<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>
       </div>
    </div>
</td>

tution-table-list-row.ts file

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

    [...]

}

Solution

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

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

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

@Component({
  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