創建DevExtreme應用程序

如果你從頭開始一個項目，那就使用DevExtreme Angular 模板。生成的項目帶導航菜單以及在響應布局中的幾個對應的示例視圖。

你可以使用 DevExtreme CLI 生成應用程序:

npx -p devextreme-cli devextreme new angular-app app-name
cd app-name
npm run start

注

npx 需要 npm v5.2 或更高。如果是之前的版本，要么升級 npm 要么安裝全局 DevExtreme CLI 然后運行命令安裝以下包：

npm i -g devextreme-cli
devextreme new angular-app app-name

這個程序中已經包含了DataGrid 組件。 下邊的指導演示了如何加入其它的DevExtreme 組件，用 Button 組件來舉個例子：

在要用到的地方，在NgModule 中導入DevExtreme組件模塊。打開src/app/app-routing.module.ts文件，加入如下代碼：
app-routing.module.ts

// ...
import { ..., DxButtonModule } from 'devextreme-angular';
 
@NgModule({
    imports: [ ..., DxButtonModule ],
    // ...
})
export class AppModule { }

配置DevExtreme 組件標記。添加以下代碼到 src/app/pages/home/home.component.html 文件中：
home.component.html

<!-- ... -->
<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>
<!-- ... -->

申明Angular中的DevExtreme回調函數、事件句柄、綁定屬性。這個例子中 onClick 事件句柄在 src/app/pages/home/home.component.ts 文件中：
home.component.ts

// ...
export class HomeComponent {
    helloWorld() {
        alert('Hello world!');
    }
}

你點了Home頁面，你就可以看到按鈕了。