Angular Display Data: How To Display Data In Angular 12

Angular 7 Display Data in Table Format

Angular ngFor is an inbuilt directive that helps us 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. However, 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 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, then check out this Angular CRUD Tutorial article. Let’s see one by one step to display data in Angular.

Step 1: Install Angular 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 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">
          <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>

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. For example, 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, we will mostly 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


  1. 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.

Leave A Reply

Please enter your comment!
Please enter your name here

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