Angular 2 Data Display

In this chapter, we will introduce how to display data on the user interface. You can use the following three methods:

  • Display component properties via interpolation
  • Display array properties via NgFor
  • Conditional display via NgIf

Displaying Component Properties with Interpolation

To display a component's property, interpolation is the simplest way. The format is:{{propertyName}}。

The following code is based onAngular 2 TypeScript environment configurationto create. You can download the source code in that chapter and modify the files mentioned below.

app/app.component.ts file:

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

Angular will automatically extract the values of the title and mySite properties from the component and display them in the browser. The displayed information is as follows:

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

Using ngFor to Display Array Properties

We can also loop through multiple sites. Modify the following file:

app/app.component.ts file:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My favorite websites:{{mySite}}</h2> <p>Website list:</p> <ul> <li *ngFor="let site of sites"> {{ site }} </li> </ul> ` }) export class AppComponent { title = 'Site list'; sites = ['Example', '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. Don't forget the leading asterisk (*) in *ngFor.

After modification, the browser displays as follows:

In the example, ngFor loops over an array. In fact, ngFor can iterate over any iterable object.

Next, we create a site.ts file in the app directory. The code is as follows:

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.

Next, we 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 websites:{{mySite.name}}</h2> <p>Website list:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> ` }) export class AppComponent { title = 'Site list'; sites = [ new Site(1, 'Example'), 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 output data.

In the following example, we check if the number of websites is more than 3, and output a prompt message: Modify the following app.component.ts file. The code is as follows:

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 websites:{{mySite.name}}</h2> <p>Website list:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> <p *ngIf="sites.length > 3">You have many favorite websites!</p> ` }) export class AppComponent { title = 'Site list'; sites = [ new Site(1, 'Example'), 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:

Other Extensions