AppDividend
Latest Code Tutorials

How To Display Data In Angular | Angular 9 Display Data

3

Angular ngFor is an inbuilt directive that helps us to loop through the backend data and display the data at the frontend. We can display the data in whatever format we want. The general use case is to display the data in tabular format means in table format. In the real Angular app, the data is dynamic coming from the backend API. So, we need to display the data in a proper format so that the user can interact adequately. For this example, we will take a static data defined in an array format and then display that data on the frontend using the Angular ngFor directive.

How To Display Data In Angular

To display data in Angular, we can use the Angular httpclient module to send a network request to a server and fetch the data and then use the ngFor directive to render the data to the frontend.

If you are new to Angular 9, then check out this Angular 9 CRUD Tutorial article. Let’s see one by one step to display data in Angular 9.

Step 1: Install Angular 9 Application

If you do not have the latest Angular CLI, then you need to update your CLI. For more guidance, see this tutorial.

Now, create a new project using the following command.

How To Display Data In Angular

Now, go inside the folder and open the folder in Visual Studio Code.

Next, install the Bootstrap 4 CSS Framework using the following command.

npm install bootstrap --save

Now, add the bootstrap css file inside the angular.json file.

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

Step 2: Create a Model file.

Inside the src >> app folder, create one file called Character.ts file and add the following code inside it.

// Character.ts

export default class Character {
    actor_name: String;
    character_name: String;
    gender: String;
    status: String;
}

We will display the Game of Thrones characters and their properties like actor_name, character_name, gender, status, etc.

Now, create an array of data inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import Character from './Character';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   characters: Character[] = [
    {
	actor_name: 'Peter Dinklage',
	character_name: 'Tyrion Lannister',
	gender: 'Male',
        status: 'Alive'
    },
    {
	actor_name: 'Sean Bean',
	character_name: 'Ned Stark',
	gender: 'Male',
	status: 'Dead'
    },
    {
	actor_name: 'Emilia Clark',
	character_name: 'Khaleesi',
	gender: 'Female',
	status: 'Alive'
    },
    {
	actor_name: 'Catelyn Stark',
	character_name: 'Michelle Fairley',
	gender: 'Female',
	status: 'Dead'
    }
  ];
}

Step 3: Create an HTML view to display data in Angular

Now, the last step is to write the HTML code to display the data.

We will first display the data in Table Format.

Write the following code inside the app.component.html file.

<div class="container">
  <table class="table table-striped">
    <thead>
        <tr>
          <th>Actor Name</th>
          <th>Character Name</th>
          <th>Gender</th>
          <th>Status</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let character of characters">
        <td>{{ character.actor_name }}</td>
        <td>{{ character.character_name }}</td>
        <td>{{ character.gender }}</td>
        <td>{{ character.status }}</td>
      </tr>
    </tbody>
  </table>
</div>

Now, in this code, we have used the *ngFor to display the characters one by one.

Save the file and go to the terminal and hit the following command.

ng serve --open

It will open up the browser and open this URL: http://localhost:4200.

See the below output.

How To Display Data In Angular | Angular 7 Display Data

We can also display the output in the unordered list. See the following HTML code.

<div class="container">  
  <ul *ngFor="let character of characters">
    <li>{{ character.actor_name }}</li>
    <li>{{ character.character_name }}</li>
    <li>{{ character.gender }}</li>
    <li>{{ character.status }}</li>
  </ul>
</div>

Now, it will display the data in the unordered list.

In a real-life scenario, mostly we will display data in table format.

Finally, How To Display Data In Angular Example Tutorial is over.

See also

Angular ngmodel

Angular ngclass

Angular ngswitch

Angular ngstyle

Angular ngrx

3 Comments
  1. takie says

    hi how do i display the table data which is align to the table header.

  2. Kathrin says

    Hi there everyone, it’s my first pay a visit at this web page, and piece of
    writing is actually fruitful designed for me, keep up posting such posts.

  3. Mukta says

    Hey, thanks for this tutorial. Works really well for me! I was confused on how to put data in table.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.