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-app

update Ts File src/app/app.component.ts

import { Component } from '@angular/core';


interface Student {

    id: Number;

    name: String;

    email: String;

    gender: String;




  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:


<div class="container">

  <h1>How to Display Data in Angular 10? - rathorji.in</h1>

  <table class="table table-striped">










      <tr *ngFor="let student of students">

        <td>{{ student.id }}</td>

        <td>{{ student.name }}</td>

        <td>{{ student.email }}</td>

        <td>{{ student.gender }}</td>





Run this command:

ng serve

I hope this example helps you.