Latest web development tutorials

AngularJS2 data

This chapter we will tell you how the data is displayed on the user interface, you can use the following three ways:

  • Display properties of a component by interpolation expression
  • By NgFor display an array type attribute
  • By NgIf achieve conditional display

Display properties of a component by interpolation expression

To display the component properties, interpolation is the easiest way to format:{{name}} attribute.

The following code is based AngularJS2 TypeScript environment configuration to create, and then you can download the source code on that section, and modify a few files mentioned below.

app / app.component.ts file:

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

Angular automatically extract value from the property title and mySite assembly, and displayed in the browser, the following information is displayed:

Note: The template is a packet string backquote ( `) in a multi-line, rather than a single quote ( ').

Use ngFor display array property

We can also loop output multiple sites, modify the following files:

app / app.component.ts file:

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

Code to display the sites we list each entry in the template Angular ngFor instruction, do not forget * ngFor the leading asterisk (*). .

After modification, the browser displays the following:

Example ngFor circulating an array fact ngFor can iterate over any object that can be iterative.

Next we create site.ts files in app directory, as follows:

app / site.ts file:

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

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

Then we loop output Site name attribute 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 site: {. {mySite name}} </ h2> <p> list of sites: </ p> <ul> <li * ngFor = "let site of sites"> {{ site. name }} </ Li> </ ul> `}) export class AppComponent { title = 'Site List'; sites = [ new Site (1, 'tutorial'), new Site (2, 'Google') , new Site (3, 'Taobao') , new Site (4, 'Facebook') ]; MySite = this sites [0 ];.}

After modification, the browser displays the following:

Conditional display by NgIf

We can use the data to set the output NgIf specified conditions.

The following examples, we determine if the site having 3 or more, the output message: Modify the following app.component.ts file, 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 site: {. {mySite name}} </ h2> <p> list of sites: </ p> <ul> <li * ngFor = "let site of sites"> {{ site. name }} </ Li> </ ul> <p * ngIf = "sites.length> 3"> You have a number of favorite sites! </ P> `}) export class AppComponent { title = 'Site List'; sites = [ new Site (1, 'tutorial'), new Site (2, 'Google') , new Site (3, 'Taobao') , new Site (4, 'Facebook') ]; MySite = this sites [0 ];.}

After modification, the browser displays as shown below, at the bottom of more than a message: