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

how to display data with angular 8 tutorial example

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:

angular-8-tutorial-how-to-display-data---final-results

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-8-tutorial-how-to-display-data---1-results

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:

angular-8-tutorial-how-to-display-data---2-results-ng-for

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:

angular-8-tutorial-how-to-display-data---3-results-with-class

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.

angular-8-tutorial-how-to-display-data---final-results

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!



By grokonez | May 31, 2019.


Related Posts


36 thoughts on “Display Data in Angular (6,7,8) Tutorial with Examples”

  1. 392965 962547Thank you for the auspicious writeup. It in fact was a amusement account it. Appear advanced to much more added agreeable from you! Nevertheless, how could we communicate? 161524

  2. 344955 280011Conveyancing […]we like to honor other sites on the internet, even if they arent related to us, by linking to them. Below are some internet sites worth checking out[…] 760591

  3. 318129 679034It is difficult to get knowledgeable folks on this subject, but the truth is be understood as what happens you are preaching about! Thanks 455034

  4. 465054 736046I dont normally check out these types of websites (Im a pretty modest person) – but even though I was a bit shocked as I was reading, I was undoubtedly a bit excited as properly. Thanks for producing my day 500617

  5. 500726 541021Great V I should definitely pronounce, impressed with your site. I had no trouble navigating through all tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. 605098

  6. 420219 226992This web page is often a walk-through its the internet you wanted about this and didnt know who to question. Glimpse here, and you will completely discover it. 324517

  7. 982625 882209Hi there for your personal broad critique, then again particularly passionate the recent Zune, and moreover intend this specific, not to mention the beneficial feedbacks other sorts of everyone has posted, will determine if is it doesnt answer you are searching for. 434182

  8. 285660 67594Now im encountering a fresh short difficulties Once i cant appear like allowed to sign up for the certain give food to, Now im utilizing search engines like google audience. 649900

Got Something To Say:

Your email address will not be published. Required fields are marked *

*