In this chapter, we will introduce how to display data to the user interface. You can use the following three methods:
* Display component properties through interpolation expressions
* Display array-type properties through NgFor
* Display conditionally through NgIf
* * *
## Display Component Properties Using Interpolation
To display component properties, interpolation is the simplest method. The format is: **{{property name}}**.
The following code is based on (#). You can download the source code from that chapter and modify the files mentioned below.
## app/app.component.ts File:
import{Component}from'@angular/core'; @Component({selector: 'my-app', template: `
{{title}}
My Favorite Websites: {{mySite}}
` })export class AppComponent{title = 'Site list'; mySite = ''; }
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 (').
* * *
## Display Array Properties Using ngFor
We can also loop through and output multiple sites. Modify the following file:
## app/app.component.ts File:
import{Component}from'@angular/core'; @Component({selector: 'my-app', template: `
{{title}}
My Favorite Websites: {{mySite}}
Website List:
` })export class AppComponent{title = 'Site list'; sites = ['', 'Google', 'Taobao', 'Facebook']; mySite = this.sites; }
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 through an array. In fact, ngFor can iterate over any iterable object.
Next, we create the 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){}}
In the above code, we defined 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: `
{{title}}
My Favorite Websites: {{mySite.name}}
Website List:
` })export class AppComponent{title = 'Site list'; sites = [new Site(1, ''), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook')]; mySite = this.sites; }
After modification, the browser displays as follows:
!(#)
* * *
## Conditional Display Using NgIf
We can use NgIf to set output data based on specified conditions.
In the following example, we check if there are more than 3 websites, and output a prompt message: Modify the app.component.ts file with the following code:
## app/app.component.ts File:
import{Component}from'@angular/core'; import{Site}from'./site'; @Component({selector: 'my-app', template: `
{{title}}
My Favorite Websites: {{mySite.name}}
Website List:
3">You have many favorite websites!
` })export class AppComponent{title = 'Site list'; sites = [new Site(1, ''), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook')]; mySite = this.sites; }
After modification, the browser displays as follows, with an additional prompt message at the bottom:
!(#)
YouTip