ItSolutionStuff.com

Angular 10 Display JSON Data in Table Example

By Hardik Savani β€’ October 20, 2023
Angular

This tutorial will give you example of angular 10 display json data in table. you can understand a concept of how to display data in angular 10. this example will help you angular 10 show data in table. i explained simply about how to show data in angular 10. Alright, let’s dive into the steps.

Sometime we need to display our data in table format for front end. we will use ngfor directive for display data in table. we will also use bootstrap for displaying data in angular application.

Let's see simple following step to done simple example that will help you to displaying data in angular app.

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new my-app

updated Ts File

In this file we will create students object array using Student interface. so let's see bellow file code.

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:

In this step, we will write code for display data of stuidents object array variable using ngfor directive.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 10.

src/app/app.component.html

<div class="container">

<h1>How to Display Data in Angular 10? - ItSolutionStuff.com</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>

Now you can run your application using following command:

ng serve

You can see bellow layout for demo. let's follow bellow step.

Preview:

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

πŸ“Ί Subscribe on YouTube

We Are Recommending You

β˜…

Angular 11/10 Material Card Example

Read Now β†’
β˜…

Angular 10 Custom Directives Example

Read Now β†’
β˜…

Angular 11/10 Crop Image Before Upload with Preview Example

Read Now β†’
β˜…

Angular 10 Dynamically Add Remove Input Fields Reactive Forms Example

Read Now β†’
β˜…

Angular 11/10 Multi Select Dropdown Example

Read Now β†’
β˜…

Angular 10 Reactive Forms FormArray Example

Read Now β†’
β˜…

Angular 11/10 SEO: Adding Title and Meta Tags Example

Read Now β†’
β˜…

How to Create Service in Angular 10?

Read Now β†’
β˜…

Angular 10 File Upload Tutorial Example

Read Now β†’
β˜…

Angular 10 Bootstrap Modal Example

Read Now β†’
β˜…

Angular 10/9/8 Bootstrap 4 Popover Example

Read Now β†’