Latest Code Tutorials

How To Display Data In Angular | Angular 9 Display Data


Angular ngFor is an inbuilt directive that helps us to loop through the backend data and display it on 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 properly. 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

If you are new to Angular 9, then check out this Angular 9 CRUD Tutorial article. In that tutorial also, I have displayed the data in the Frontend using the ngFor loop, but this tutorial is specific, how to display data. 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": [

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';
   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 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">
          <th>Actor Name</th>
          <th>Character Name</th>
      <tr *ngFor="let character of characters">
        <td>{{ character.actor_name }}</td>
        <td>{{ character.character_name }}</td>
        <td>{{ character.gender }}</td>
        <td>{{ character.status }}</td>

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>

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.

1 Comment
  1. takie says

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

Leave A Reply

Your email address will not be published.

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