Angular 2 Data Display

In this section, we will introduce how to display data on the user interface using the following three methods:

• Displaying component properties through interpolation expressions
• Displaying array properties using NgFor
• Conditional display using NgIf

Displaying Component Properties with Interpolation

To display component properties, interpolation is the simplest method, formatted as: {{property name}}.

The following code is based on the Angular 2 TypeScript Environment Configuration. You can download the source code from that section and modify the mentioned files.

app/app.component.ts File:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite website: {{mySite}}</h2>
    `
})
export class AppComponent {
  title = 'Site List';
  mySite = 'tutorialpro.org';
}

Angular automatically extracts the values of the title and mySite properties from the component and displays them in the browser, as shown below:

Note: The template is enclosed in backticks (`) as a multi-line string, not single quotes (').

Displaying Array Properties with ngFor

We can also loop through and output multiple sites by modifying the following file:

app/app.component.ts File:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite website: {{mySite}}</h2>
    <p>Site list:</p>
    <ul>
      &lt;li *ngFor="let site of sites">
        {{ site }}
      </li>
    </ul>
    `
})
export class AppComponent {
  title = 'Site List';
  sites = ['tutorialpro.org', 'Google', 'Taobao', 'Facebook'];
  mySite = this.sites[0];
}

In the code, we use Angular's ngFor directive in the template to display each entry in the sites list. Do not forget the leading asterisk (*) in *ngFor.

After modification, the browser displays as follows:

The example loops through an array; in fact, ngFor can iterate over any iterable object.

Next, we create a site.ts file in the app directory with the following code:

app/site.ts File:

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

The above code defines a class with a constructor and two properties: id and name.

We then loop through and output the name property of the Site class:

app/app.component.ts File:

import { Component } from '@angular/core';
import { Site } from './site';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite website: {{mySite.name}}</h2>
    <p>Site list:</p>
    <ul>
      &lt;li *ngFor="let site of sites">
        {{ site.name }}
      </li>
    </ul>
    `
})
export class AppComponent {
  title = 'Site List';
  sites = [
      new Site(1, 'tutorialpro.org'),
      new Site(2, 'Google'),
      new Site(3, 'Taobao'),
      new Site(4, 'Facebook')
      ];
  mySite = this.sites[0];
}

After modification, the browser displays as follows:

Conditional Display with NgIf

We can use NgIf to conditionally display data. In the following example, we determine that if there are more than 3 websites, a prompt message is displayed: Modify the following app.component.ts file with the code below:

app/app.component.ts File:

import { Component } from '@angular/core';
import { Site } from './site';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite website: {{mySite.name}}</h2>
    <p>Website list:</p>
    <ul>
      &lt;li *ngFor="let site of sites">
       {{ site.name }}
      </li>
    </ul>
    &lt;p *ngIf="sites.length > 3">You have many favorite websites!</p>
    `
})

export class AppComponent {
  title = 'Site List';
  sites = [
      new Site(1, 'tutorialpro.org'),
      new Site(2, 'Google'),
      new Site(3, 'Taobao'),
      new Site(4, 'Facebook')
      ];
  mySite = this.sites[0];
}

After modification, the browser displays as follows, with an additional prompt message at the bottom: