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

how to display data with angular 8 tutorial example

[no_toc]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:

import { Component } from '@angular/core';

import { Customer } from './customer'

@Component({
  selector: 'app-root',
  template: `
  <h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2>
  <h3>Customer is : {{customer}}</h3>
`
})
export class AppComponent {
  title = 'How to display data with Angular - from Grokonez.com site';
  customer = "Jack";
}

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

<h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2>
<h3>Customer is : {{customer}}</h3>

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:


export class AppComponent {
  title: string;
  customer: string;

  constructor() {
    this.title = 'How to display data with Angular - from Grokonez.com site';
    this.customer = "Jack";
  }
}

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:


export class AppComponent {
  title: string;
  customers: string[];
  firstcustomer: string;

  constructor() {
    this.title = 'How to display data with Angular - from Grokonez.com site';
    this.customers = ["Jack", "Mary", "Jane", "Davis"];
    this.firstcustomer = this.customers[0];
  }
}

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

template: `
<h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2>
<h3>Customer is : {{firstcustomer}}</h3>
<ul>
<li *ngFor="let customer of customers">
	{{ customer }}
</li>
</ul>
`

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:


export class Customer {
  constructor(
    public id: number,
    public name: string,
    public age: number) { }
}

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

Now using Customer class in AppComponent:


export class AppComponent {
  title = 'How to display data with Angular - from Grokonez.com site';

  customers = [
    new Customer(1, 'Jack', 25),
    new Customer(13, 'Mary', 31),
    new Customer(15, 'Jane', 19),
    new Customer(20, 'Davis', 27)
  ];

  firstCustomer = this.customers[0];
}

– Update template to display Customer info as below:

template: `
  <h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2>
  <h3>First Customer is : {{firstCustomer.name}}</h3>
  <p>All Customers:</p>
  <ul>
    <li *ngFor="let customer of customers">
      name = {{ customer.name }}, age = {{ customer.age}}
    </li>
  </ul>
`

-> 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:

<p *ngIf="customers.length > 3"><strong>There are many customers!</strong></p>

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!

159 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

  9. Although sites we backlink to below are considerably not connected to ours, we really feel they are actually really worth a go via, so have a look. Ilysa Conny Groark

  10. Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  11. Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  12. Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  13. I am not sure where you are getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for magnificent info I was looking for this information for my mission. Alfreda Wolfgang Bramwell

  14. This very blog is obviously awesome and also factual. I have picked up a bunch of useful things out of it. I ad love to come back again soon. Thanks a bunch! Oralie Skelly Sarah

  15. Thanks for your marvelous posting! I definitely enjoyed reading it, you happen to be a great author. I will remember to bookmark your blog and will come back later in life. I want to encourage you to continue your great job, have a nice day!| Minni Waylan Cusick

  16. It is actually a nice and useful piece of information. I am satisfied that you simply shared this helpful info with us. Please stay us up to date like this. Thank you for sharing. Hedy Arnold Joanne

  17. My family all the time say that I am killing my time here at web, however I know I am getting familiarity daily by reading thes good posts. Evania Cornelius Clift Celinda Matthaeus Iorio

  18. Having read this I believed it was very enlightening. I appreciate you finding the time and effort to put this content together. I once again find myself spending a significant amount of time both reading and posting comments. But so what, it was still worth it! Nesta Inglebert Littman

  19. I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You are incredible! Thanks! Alis Ferdinand Sirkin

  20. Pretty section of content. I just stumbled upon your weblog and
    in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I’ll be subscribing to your augment and
    even I achievement you access consistently quickly

  21. Greetings! I know this is somewhat off topic but I was wondering if you knew
    where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding
    one? Thanks a lot.!

  22. Pretty section of content. I just stumbled upon your weblog and
    in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I’ll be subscribing to your augment and
    even I achievement you access consistently quickly

  23. Greetings! I know this is somewhat off topic but I was wondering if you knew
    where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding
    one? Thanks a lot!

  24. Pretty section of content. I just stumbled upon your weblog and
    in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I’ll be subscribing to your augment and
    even I achievement you access consistently quickly

  25. Spot on with this write-up, I actually feel this
    website needs a great deal more attention. I’ll probably be returning to see
    more, thanks for the information!

  26. your bblogs contain real information and you guys post great articles. we are grateful to you.

  27. Hello there! This article couldn’t be written much better!
    Looking through this article reminds me of my previous roommate!
    He always kept preaching about this. I’ll forward this post to him.
    Pretty sure he will have a very good read. Thank you for sharing!

Leave a Reply

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