How to show data to angular? - html

Question

list.component.ts
import { Component, OnInit } from '#angular/core';
import { StudentAPIService } from 'src/app/services/student-api.service';
import { Student } from 'src/app/model/student';
#Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor( private studentAPI: StudentAPIService ) { }
ngOnInit(): void {
this.studentAPI.studentList().subscribe(res=>{
console.log(res);
return res;
});
}
}
list.component.html
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="center">
<table id="student_Table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of res">
<td>{{ row.student_name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am new in angular and I want to show data in list.component.html table. In ts file I have successfully fetch data through an API and data are showing in console.log(res) but unable to show in table. So, How can I do this? Please help me.
Thank You

Answer 1

You have to define the variable (and it should be public) in the class definition, then assign the service response to that variable. So;
#Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor( private studentAPI: StudentAPIService ) { }
public res: any | any[]; // you can create an interface to the data type
ngOnInit(): void {
this.studentAPI.studentList().subscribe(res=>{
this.res = res;
});
}
}

Answer 2

You can use async pipe and get rid of subscribing inside component. Because async pipe will auto unsubscribe when component destroyed.
export class ListComponent implements OnInit {
response$:Observable<IStudentList[]>;
constructor( private studentAPI: StudentAPIService ) { }
ngOnInit(): void {
this.response$ = this.studentAPI.studentList();
}
}
Now You can iterate response$ like below..
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="center">
<table id="student_Table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of response$ | async">
<td>{{ row.student_name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
See above <tr *ngFor="let row of response$ | async"> this is auto-subscribe and you will get your list data in html and iterate over it and display it.