本章節我們将為大家介紹如何将資料顯示到使用者界面上，可以使用以下三種方式：
通過插值表達式顯示元件的屬性
通過 NgFor 顯示數組型屬性
通過 NgIf 實作按條件顯示
要顯示元件的屬性，插值是最簡單的方式，格式為：<b>{{屬性名}}</b>。
以下代碼基于 Angular 2 TypeScript 環境配置 來建立，你可以在該章節上下載下傳源碼，并修改以下提到的幾個檔案。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>我喜歡的網站: {{mySite}}</h2>
`
})
export class AppComponent {
title = '站點清單';
mySite = '菜鳥教程';
}
Angular 會自動從元件中提取 title 和 mySite 屬性的值，并顯示在浏覽器中，顯示資訊如下：
<b>注意：</b>模闆是包在反引号 (`) 中的一個多行字元串，而不是單引号 (')。
我們也可以循環輸出多個站點，修改以下檔案：
<p>網站清單:</p>
<ul>
<li *ngFor="let site of sites">
{{ site }}
</li>
</ul>
sites = ['菜鳥教程', 'Google', 'Taobao', 'Facebook'];
mySite = this.sites[0];
代碼中我們在模闆使用 Angular 的 ngFor 指令來顯示 sites 清單中的每一個條目，不要忘記 *ngFor 中的前導星号 (*) 。。
修改後，浏覽器顯示如下所示：
執行個體中 ngFor 循環了一個數組， 事實上 ngFor 可以疊代任何可疊代的對象。
接下來我們在 app 目錄下建立 site.ts 的檔案，代碼如下：
export class Site {
constructor(
public id: number,
public name: string) { }
以上代碼中定義了一個帶有構造函數和兩個屬性： id 和 name 的類。
接着我們循環輸出 Site 類的 name 屬性：
import { Site } from './site';
<h2>我喜歡的網站: {{mySite.name}}</h2>
{{ site.name }}
sites = [
new Site(1, '菜鳥教程'),
new Site(2, 'Google'),
new Site(3, 'Taobao'),
new Site(4, 'Facebook')
];
我們可以使用 NgIf 來設定輸出指定條件的資料。
以下執行個體中我們判斷如果網站數 3 個以上，輸出提示資訊：修改以下 app.component.ts 檔案，代碼如下：
<p *ngIf="sites.length > 3">你有很多個喜歡的網站!</p>
修改後，浏覽器顯示如下所示，底部多了個提示資訊：