igniteui angular wrappers
17.0.0
igniteui-angular本地角組件！使用projectsigniteui-angular-wrapperssrcpublic-api.ts中發現的組件在角度應用中使用IGNITE UI控件。在這裡與運行樣品一起工作。
重要的是，該存儲庫已從igniteui-angular2重命名為igniteui-angular-wrappers 。在我們的新命名慣例中閱讀更多信息。
要運行樣品，您需要安裝在計算機上的node.js。之後，從您的終端運行以下命令：
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers取決於ignite-ui-full許可軟件包。請遵循本指南，以設置對IGNITE UI私有NPM feed的訪問，並將依賴項添加到package.json 。
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
開始使用IGNITE UI CLI和IGNITE UI角包裝器：
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
在Angular應用程序中，IGNITE UI控制支持標記初始化，該標記初始化是通過使用自定義標籤來完成的。
每個控件都會實現一個自定義標籤組件，其中通過將每個大寫字母在-名稱中的每個大寫字母中形成標籤名稱。
注意：建議在自關閉標籤（ <ig-combo/> ）上使用關閉標籤（ </ig-combo> ），因為已知後者在某些瀏覽器上提出問題（取決於使用的文檔模式）。
| 控制名稱 | 標籤 |
|---|---|
| igcombo | <ig-combo> |
| iggrid | <ig-grid> |
| Igdatachart | <ig-data-chart> |
| igdialog | <ig-dialog> |
| igdateeditor | <ig-date-editor> |
| igeditor | <ig-editor> |
| igmaskeditor | <ig-mask-editor> |
| Ignumericeditor | <ig-numeric-editor> |
| igpercenteditor | <ig-percent-editor> |
| igtexteditor | <ig-text-editor> |
| igdatepicker | <ig-date-picker> |
| 伊格里 | <ig-tree> |
| igmap | <ig-map> |
| igupload | <ig-upload> |
| IgVideOplayer | <ig-video-player> |
有兩個強制性屬性需要設置為IGNITE UI控制自定義標籤： options - 指向包含控件配置的應用程序組件類上的屬性。 widgetId控件需要將ID分配給它。
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]='data'
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
}
在此示例中， options屬性指向應用程序兼容類上的gridOptions屬性，而widgetId指向id屬性。
所有頂級選項都可以設置為IGNITE UI控制自定義標籤的屬性。在這種情況下， options屬性不是強制性的，但允許。而且，如果將options和頂級屬性組合在一起，則在有重疊屬性時，頂級屬性將覆蓋options 。此外，更改頂級屬性將僅在選項設置時將更改應用於小部件。
@Component({
selector: 'my-app',
template: `<ig-grid
[widgetId]='id'
[width]='w'
[autoCommit]='true'
[dataSource]='data'
[height]='h'
[autoGenerateColumns]='true'
>
</ig-grid>`
})
export class AppComponent {
private id: string;
private data: any;
private w: string;
private h: string;
private pKey: string;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.w = '100%';
this.h = '400px';
this.pKey = 'ProductID';
}
}
有兩個自定義標籤<column>和<features>在iggrid/igtreegrid/ighierarchicalgrid中使用，以相應地配置columns和features選項。
<ig-grid [widgetId]='id'>
<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
<features>
<paging [pageSize]="currPageSize"></paging>
<filtering></filtering>
<selection></selection>
<group-by></group-by>
</features>
</ig-grid>
每個網格功能也由自定義標籤表示。
| 功能名稱 | 標籤 |
|---|---|
| 柱狀 | <column-moving> |
| 過濾 | <filtering> |
| Groupby | <group-by> |
| 隱藏 | <hiding> |
| 細胞器 | <cell-merging> |
| appendrowsondemand | <append-rows-on-demand> |
| 多叉台 | <multi-column-headers> |
| 分頁 | <paging> |
| 響應迅速 | <responsive> |
| 調整大小 | <resizing> |
| Rowselectors | <row-selectors> |
| 選擇 | <selection> |
| 排序 | <sorting> |
| 摘要 | <summaries> |
| 列縮 | <column-fixing> |
| 工具提示 | <tooltips> |
| 更新 | <updating> |
為了一次更改更多選項（或使用另一組選項重新創建組件），可以將新配置應用於options屬性。
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
recreateGrid() {
this.gridOptions = {
dataSource: Northwind.getAnotherData(),
width: "700px",
autoGenerateColumns: true,
features: [
{ name: "Paging" }
]
};
}
}
在此示例中， options屬性指向gridOptions的點和引用中的更改將破壞網格，將舊選項與新選項相結合，並將網格與組合選項創建。另請注意，新網格的高度將為400px，即使沒有將其定義為新選項，因為它與新選項結合在一起。如果要求禁用選項，則將其設置為null ， undefined ， []或{} 。
通過分配屬性的名稱是由括號包圍的控件名稱的名稱，而值是事件處理程序的名稱，可以通過分配屬性的名稱來實現與控制事件的綁定。
| 事件 | 標記 |
|---|---|
| iggrid.events.databind | <ig-grid (dataBind)="dataBindHandler"> |
| igcombo.events.textchanged | <ig-combo (textChanged)="textChangedHandler"> |
| igdateeditor.events.keypress | <ig-date-editor (keypress)="keypressHandler"> |
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
(dataBind)="dataBindHandler($event)"></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
private dataBindHandler: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
dataBindHandler(event, ui) {
// event handler code
}
}
在控件的配置代碼中完成與IgGrid*特徵事件的綁定。
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[dataSource]="data"
[(widgetId)]='id'></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true,
features: [
{
name: "Filtering",
dataFiltered: function (evt, ui) {
// event handler code
}
}
]
};
}
}
在此示例中，IgGridFeltering dataFiltered事件在應用程序組件類中處理。
可以通過從視圖訪問組件來調用組件方法。例如：
@Component({
selector: 'my-app',
template: '<ig-grid #grid1
[(options)]="gridOptions">
<features>
<paging [pageSize]="'2'"></paging>
</features>
</ig-grid>'
})
export class AppComponent {
private gridOptions: IgGrid;
@ViewChild("grid1") myGrid: IgGridComponent;
private id: string;
constructor() { ... }
ngAfterViewInit() {
//call grid method
var cell = this.myGrid.cellById(1, "Name");
//call grid paging method
this.myGrid.featuresList.paging.pageIndex(2);
}
}
以下控件當前支持雙向數據綁定：
對於雙向數據綁定到工作，您需要將數據源分配為模板中的屬性。例子：
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
注意：如果使用options.dataSource在.ts文件中作為配置，則雙向數據綁定將無法工作。
要手動觸發更改檢測，請使用markForCheck API。
多虧了 @type/ignite-ui，可以創建一個IGNITE UI數據源的實例。
let source = new Infragistics.DataSource(settings);
此數據源實例是用有關IgDatasource方法的Intellisense授予的。
source.dataBind();
查看以下演示以獲取更多信息。
運行測試的命令是：
npm test
之後，如果所有測試成功地傳遞了public-api.ts文件的代碼覆蓋範圍，將在./coverage/igniteui-angular-wrappers文件夾下生成。
要查看代碼覆蓋範圍，您可以在./coverage/igniteui-angular-wrappers/src下打開一個HTML文件之一。
IGNITE UI是一種高級HTML5+工具集，可幫助您創建令人驚嘆的現代Web應用程序。 Building on jQuery and jQuery UI, it primarily consists of feature rich, high-performing UI controls/widgets such as all kinds of charts, data visualization maps, (hierarchical, editable) data grids, pivot grids, enhanced editors (combo box, masked editors, HTML editor, date picker, to name a few), flexible data source connectors, and a whole lot more.在這裡列出的太多 - 查看網站以獲取更多信息並下載試用。
Ignite UI不僅是在某人的空閒時間中創建的另一個庫。它已經進行商業準備，經過良好的測試，調整為高級性能，為優質的UX設計，並以infragistics為背景，這是一家以體驗為中心的公司，具有超過24年的經驗，可為網絡，窗口和移動環境提供企業準備就緒，高性能的用戶界面工具。
