Angular 9-10-11-12 Display Data on view

[no_toc]In the tutorial, ozenero.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!

Leave a Reply

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