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
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'})exportclassAppComponent{
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 “[email protected]” −
import{ Component }from'@angular/core';@Component({
selector:'app-root',
standalone:true,
imports:[],
templateUrl:'./app.component.html',
styleUrl:'./app.component.css'})exportclassAppComponent{
username:string="[email protected]";}
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'})exportclassAppComponent{
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.