Hello Devs,
In this tutorial, we are going to learn how to show data in angular 10.
We will use ngfor directive for display data in table. we will also use bootstrap for displaying data in angular application.
Follow this step by step guide given below:
Create New App
ng new my-appupdate Ts File src/app/app.component.ts
import { Component } from '@angular/core';
interface Student {
id: Number;
name: String;
email: String;
gender: String;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
students: Student[] = [
{
id: 1,
name: "Hardik",
email: "hardik@gmail.com",
gender: "male"
},
{
id: 2,
name: "Paresh",
email: "Paresh@gmail.com",
gender: "male"
},
{
id: 3,
name: "Kiran",
email: "kiran@gmail.com",
gender: "female"
},
{
id: 4,
name: "Mahesh",
email: "mahesh@gmail.com",
gender: "male"
},
{
id: 5,
name: "Karan",
email: "karan@gmail.com",
gender: "male"
},
]
}Template Code:
src/app/app.component.html
<div class="container">
<h1>How to Display Data in Angular 10? - rathorji.in</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.email }}</td>
<td>{{ student.gender }}</td>
</tr>
</tbody>
</table>
</div>Run this command:
ng serveI hope this example helps you.