Build an HTML Table Example Dynamically with Angular 10/9 and ngFor

Build an HTML Table Example Dynamically with Angular 10/9 and ngFor

In this post we will give you information about Build an HTML Table Example Dynamically with Angular 10/9 and ngFor. Hear we will give you detail about Build an HTML Table Example Dynamically with Angular 10/9 and ngForAnd how to use it also give you demo for it if it is necessary.

In this quick example, we’ll see how to build an HTML table dynamically with Angular 10/9 and the ngFor directive.

Let’s assume you already have Angular CLI 10 installed on your machine and an Angular 10 project ready.

Note: Angular 10 is currently in beta version.

You can install Angular CLI 10 using the following command:

$ npm install --global @angular/cli@next

We need to use the @next tag at this time till the final release of Angular 10.

If you are new to these how-tos, check out how to install and set up a project and the prerequisites.

See also  Difference between forEach and map methods in JavaScript

Building a Table with Angular 10 ngFor

You can do this example in two steps:

  • Step 1 – Getting Table Data
  • Step 2 – Displaying the Table Using ngFor

Before we can use ngFor for displaying data in a table, we need the data. In a real-world example, we’ll need to get data from a server database.

Step 1 – Getting Table Data with Angular 10 Service and HttpClient

This is better done using an Angular 10 service and the HttpClient API, so let’s suppose we have the following service:


Pleate note that you need to import HttpClientModule in your application module before you can use HttpClient.

Next, you need to inject the ApiService in the component where you want to display your data.

See also  Laravel age calculate from date using carbon

Let’s keep it simple and use the App component.

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


Step 2 – Displaying the Table Using Angular 10/9 ngFor

Next, open the src/app/app.component.html file and update it as follows:

            <div>                <h1>NgFor Table Example</h1>                <table>                    <thead>                        <tr>                            <th>#</th>                            <th>Customer Name</th>                            <th>Email</th>                            <th>Action</th>                        </tr>                    </thead>                    <tbody>                        <tr *ngFor="let item of data">                            <th>{{ }}</th>                            <td>{{ }}</td>                            <td>{{ }}</td>                            <td>                                <button type="button" >Delete</button>                            </td>                        </tr>                    </tbody>                </table>            </div>

We use the ngFor directive to iterate over the customers data fetched from the server using the ApiService and we build the HTML table dynamically by displaying each row of the table in each ngFor iteration.

See also  React - Change the button color onClick

As a wrap-up, ngFor is a powerful Angular Core directive that allows developers to loop or iterate over arrays and collections of data in templates.

ngFor and ngIf are called structural directives.

We’ve seen a simple Angular 10/9 example of building a simple HTML table inside an Angular template using ngFor.

Hope this code and post will helped you for implement Build an HTML Table Example Dynamically with Angular 10/9 and ngFor. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US