Angular - Displaying Data

This angular tutorial will discuss the various ways to display data, including how to display array data, object data, variables data, etc. A most common question in the minds of users who have just started learning an angular framework is, how do we display data in angular?

Displaying Data in Angular

Displaying data in Angular involves accessing the properties of a component class and rendering their values in the template. Angular provides various ways to display these data values (including variables, objects, arrays, etc.) in the template (HTML) using features such as interpolation, property binding, and structural directives.

Let's discuss a few different ways to display data in Angular, with appropriate examples to help you understand each of them clearly.

• Displaying Data using Interpolation
• Using Property Binding
• Using Structural Directive

Displaying Data using Interpolation

In Angular, interpolation is one of the most common or basic ways to bind (display) data from your component to the HTML template. It allows you to embed expressions into marked-up text and uses the double curly {{}} as a delimiter.

Syntax

Following is the syntax of interpolation in Angular −

 {{ <template expression> }} 

Here, the template_expression can be any property (variable) of your component.

Example

In this example, we will create properties (variables) named title (string type), num (number type), and isTrue (boolean type). We will bind (display) them in the template using interpolation −

In the app.component.ts, declare the properties with some initial values:

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', standalone: true, imports: [], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title: string = "Angular Application"; num: number = 10; isTrue: boolean = true; } 

In the app.component.html, bind the declared properties using interpolation {{}} −

 <h3>Displaying Angular Data with Interpolation</h3> <p>{{title}}</p> <p>Number value: {{num}}</p> <p>Boolean value: {{isTrue}}</p> 

Output

The displayed data will look like this −

Using Property Binding

This is another way to display data using Angular property bindings. In Angular, binding is a "technique" to "bind data between the component and the view".

Example

We create an input field and bind the [value] property to display the component data (i.e., variable "username") within the input field default when the page is loaded −

In the app.component.ts, create a variable named username with the value "user12@gmail.com" −

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', standalone: true, imports: [], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { username: string = "user12@gmail.com"; } 

In the app.component.html, update the existing code with the code given below −

 <h3>Displaying Angular Data with Property Binding</h3> <input type="text" [value]="username"> <p>Welcome, {{username}}!!</p> 

Output

The output of the above code will look like:

Using Structural Directives

In Angular, structural directives are built-in directives used to control the appearance and behavior of elements in the DOM. They can dynamically add, remove, or manipulate elements based on certain conditions. Common structural directives are:

• *ngIf
• *ngFor
• *ngSwitch

Example

In the example below, we will use the structural *ngFor directive to iterate through the object defined in the component and display all data in the template −

In the app.component.ts, create an array of objects with the keys id, name, and age as follows:

 import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { myData = [ { "id": 1, "name": 'abc', "age": 24 }, { "id": 2, "name": "xyz", "age": 20, }, { "id": 3, "name": "red", "age": 30 } ] } 

In the app.component.html, use the *ngFor directive to iterate through the object data and display them in the template:

 <h3>Displaying Angular Data with Stuctural Directive</h3> <ul *ngFor="let data of myData;"> <li>Id: {{data.id}}</li&t; <li>Name: {{data.name}}</li> <li>Age: {{data.age}}</li> </ul> 

Output

Following is the output of the above code −

Note! In this tutorial, we have learned the various ways to display data in Angular. There are still more methods that you can explore in individual chapters. This tutorial provided a brief introduction to the concept of displaying data in Angular.