Angular 16 Display JSON Data in HTML Table Tutorial

To get & display json data in html table with angular 16; In this tutorial, you will learn how to get & display JSON data in an HTML table using Angular 16 project.

Angular 16 Display JSON Data in HTML Table Tutorial

To get JSON data and display JSON data in HTML using Angular 16, you can use the following steps:

• Step 1 – Set Up Your Angular Project
• Step 2 – Install & Configure Bootstrap
• Step 3 – Create JSON Data File
• Step 4 – Use Component to Display JSON Data
• Step 5 – Create the HTML Template
• Step 6 – Define Required Modules in tsconfig.json
• Step 7 – Start the Development Server

Step 1 – Set Up Your Angular Project

Open your terminal or cmd and use the Angular CLI to create a new Angular project:

ng new my-new-app

Step 2 – Install & Configure Bootstrap

Once you have set up angular project into your server. Then you need to install and configure bootstrap in angular project, you can do it by using the following command:

npm install bootstrap --save

Then, add the Bootstrap CSS path in angular.json file to enable the styling:

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.scss"
]

Step 3 – Create JSON Data File

let’s assume you have a JSON file called users.json with the following content:

[
  {
    "id": 1,
    "name": "John Doe",
    "email": "[email protected]"
  },
  {
    "id": 2,
    "name": "Jane Smith",
    "email": "[email protected]"
  },
  {
    "id": 3,
    "name": "Bob Johnson",
    "email": "[email protected]"
  }
]

Step 4 – Use Component to Display JSON Data

Open src/app/app.component.ts and update it as follows:

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

import UsersJson from './users.json';
  
interface USERS {
    id: Number;
    name: String;
    email: String;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  Users: USERS[] = UsersJson;

  constructor(){
    console.log(this.Users);
  }
}

Step 5 – Create the HTML Template

Open src/app/app.component.html and create the HTML template to display the data in a table:

<div class="container mt-5">
  
  <h2>Angular Display Data from Json File Example</h2>
  
  <table class="table table-striped">
    <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of Users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</div>

Step 6 – Define Required Modules in tsconfig.json

Define the resolveJsonModule and esModuleInterop inside the compilerOptions object; as shown below:

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,  

...
...

Step 7 – Start the Development Server

You can now start the development server to see your Angular application in action. Run the following command in the terminal:

ng serve

Open your web browser and navigate to http://localhost:4200/ to view your Angular application displaying JSON data in an HTML table.

Conclusion

That’s it! You’ve successfully created an Angular 16 application that fetches JSON data and displays it in an HTML table. You can further style the table or add more features as needed for your project.

Recommended Angular Tutorials