Display Data in Angular (6,7,8) Tutorial with Examples

In the tutorial, Grokonez.com will introduce how to display data in Angular by examples:

• Display data using Interpolation
• Show array items with *ngFor
• Model Data by TypeScript class and display its properties
• Using *ngIf to insert or remove an element by on boolean expression

Related posts:
– Angular Tutorial
– Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example

Overview Angular Display Data

We display data in Angular by binding controls in an HTML template to properties of an Angular component.

We create a Component with list of customers & show data of customers:

Using Interpolation to show Component Properties

The easiest way to display a component property is to bind the property name through interpolation.
-> With interpolation, we put the property name in the view template, enclosed in double curly braces: {{firstCustomer}}.

Example:

-> The template show 2 component’s properties using double curly brace interpolation:

Angular automatically pulls the value of the title and customer properties from the component and inserts those values into the browser. Angular updates the display when these properties change.

Initialize Properties using a Constructor

– We could instead declare and initialize the properties using a constructor:

Using *ngFor to display an Array Property

To display a list of customers, we redefine a AppComponent by adding an array of customer’s name:

– Use the Angular *ngFor directive in the template to display each item in the customer list:

The *ngFor in the li element is the Angular “repeater” directive. It marks that li element as the “repeater template”.

-> result:

Creating a Data Class

Define data directly inside the component is NOT best practice.
-> We need turn the array of customers into an array of Customer objects.
So we need define a Customer class.

– Using the below commandline to create a new Customer class: ng generate class customer

After that, we have a file: customer.ts, add definition for Customer class:

Customer class has a constructor and 3 properties: id, name, and age.

Now using Customer class in AppComponent:

– Update template to display Customer info as below:

-> Result:

Show Data with * NgIf Conditional

The Angular *ngIf directive inserts or removes an element based on a truthy/falsy condition.
Add the following paragraph at the bottom of the template:

When a list customers has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
If there are 3 or fewer items, Angular omits the paragraph, so no message appears.

Note: to improve performance in a big project, Angular *ngIf directive isn’t showing and hiding the message. It is adding and removing the paragraph element from the DOM.

Conclusion

You had learned how to display data in Angular:

• Show data by Interpolation with double curly braces
• Show an array of items by *ngFor
• Using Typescript class to structure data model and display properties of the model
• Using *ngIf to display a chunk of HTML based on a boolean expression

Happy Learning! See you later!