igniteui angular wrappers
17.0.0
igniteui-angular sebagai gantinya! Gunakan komponen yang ditemukan dalam projectsigniteui-angular-wrapperssrcpublic-api.ts untuk menggunakan kontrol UI Ignite dalam aplikasi sudut. Bekerja dengan sampel yang sedang berjalan di sini.
Penting Repositori telah diganti namanya dari igniteui-angular2 menjadi igniteui-angular-wrappers . Baca lebih lanjut tentang konvensi penamaan baru kami.
Untuk menjalankan sampel, Anda memerlukan node.js yang diinstal pada mesin Anda. Setelah itu, dari terminal Anda jalankan perintah berikut:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers tergantung pada paket berlisensi ignite-ui-full . Ikuti panduan ini untuk menyiapkan akses ke umpan NPM privat UI Ignite dan tambahkan ketergantungan ke package.json .
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Untuk memulai dengan UI CLI Ignite dan pembungkus sudut UI Ignite:
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
Dalam aplikasi sudut, Ignite UI mengontrol inisialisasi markup dukungan yang dilakukan dengan menggunakan tag khusus.
Setiap kontrol mengimplementasikan komponen tag khusus di mana nama tag dibentuk dengan membagi setiap huruf kapital dalam nama kontrol dengan simbol - .
Catatan : Disarankan untuk menggunakan tag penutup ( </ig-combo> -combo>) atas tag yang menutup sendiri ( <ig-combo/> ), karena yang terakhir diketahui membuat masalah pada beberapa browser (tergantung pada mode dokumen yang digunakan).
| Nama kontrol | Menandai |
|---|---|
| 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> |
| Igtree | <ig-tree> |
| igmap | <ig-map> |
| Igupload | <ig-upload> |
| igvideoplayer | <ig-video-player> |
Ada dua atribut wajib yang perlu diatur ke tag kustom kontrol UI Ignite: options - poin ke properti pada kelas komponen aplikasi yang berisi konfigurasi kontrol. widgetId - Kontrol mengharuskan ID untuk ditugaskan kepadanya.
@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
};
}
}
Dalam contoh ini options atribut poin ke properti gridOptions pada kelas kompomen aplikasi dan poin widgetId ke properti id .
Semua opsi tingkat atas diizinkan untuk ditetapkan sebagai atribut tag kustom kontrol UI Ignite. Dalam hal ini atribut options tidak wajib, tetapi diizinkan. Dan jika keduanya- options dan atribut tingkat atas digabungkan, atribut tingkat atas akan mengesampingkan options , ketika ada properti yang tumpang tindih. Juga mengubah atribut tingkat atas akan menerapkan perubahan ke widget, hanya jika opsi disetel.
@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';
}
}
Ada dua tag khusus <column> dan <features> yang digunakan dalam iggrid/igtreegrid/ighierarchicalGrid untuk mengonfigurasi opsi columns dan features yang sesuai.
<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>
Setiap fitur grid juga diwakili oleh tag khusus.
| Nama fitur | Menandai |
|---|---|
| Columnmoving | <column-moving> |
| Penyaringan | <filtering> |
| Groupby | <group-by> |
| Persembunyian | <hiding> |
| Cellmerging | <cell-merging> |
| Appendrowsondemand | <append-rows-on-demand> |
| Multicolumnheaders | <multi-column-headers> |
| Paging | <paging> |
| Responsif | <responsive> |
| Pengukur ulang | <resizing> |
| Selektor rowsh | <row-selectors> |
| Pilihan | <selection> |
| Penyortiran | <sorting> |
| Ringkasan | <summaries> |
| Columnfixing | <column-fixing> |
| Tooltips | <tooltips> |
| Memperbarui | <updating> |
Untuk mengubah lebih banyak opsi sekaligus (atau buat kembali komponen dengan set opsi lain), konfigurasi baru dapat diterapkan ke properti 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" }
]
};
}
}
Dalam contoh ini options atribut menunjuk ke gridOptions dan berubah dalam referensi akan menghancurkan kisi, menggabungkan opsi lama dengan yang baru dan membuat kisi dengan opsi gabungan. Perhatikan juga bahwa jaringan baru akan memiliki ketinggian 400px, meskipun tidak didefinisikan ke dalam opsi baru, karena kombinasi dengan opsi baru. Jika menonaktifkan opsi diperlukan, atur ke null , undefined , [] atau {} .
Mengikat ke Acara Kontrol dicapai dengan menetapkan atribut di mana nama atribut adalah nama nama acara kontrol yang dikelilingi oleh tanda kurung dan nilainya adalah nama penangan acara.
| Peristiwa | Markup |
|---|---|
| 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
}
}
Mengikat ke iggrid* Peristiwa fitur dilakukan dalam kode konfigurasi kontrol.
@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
}
}
]
};
}
}
Dalam contoh ini iggridfiltering event dataFiltered ditangani di kelas komponen aplikasi.
Metode komponen dapat dipanggil dengan mengakses komponen dari tampilan. Misalnya:
@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);
}
}
Kontrol berikut saat ini mendukung pengikatan data dua arah:
Agar data dua arah mengikat, Anda perlu menetapkan sumber data sebagai properti dalam templat. Contoh:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
CATATAN: Ikatan data dua arah tidak akan berfungsi jika Anda menggunakan options.dataSource DataSource di file .ts sebagai konfigurasi.
Untuk memicu deteksi perubahan secara manual, gunakan markForCheck API.
Berkat @tipe/Ignite-UI, dimungkinkan untuk membuat instance dari semua sumber data UI Ignite.
let source = new Infragistics.DataSource(settings);
Sumber data ini diberikan dengan intelisense tentang metode igdataSource.
source.dataBind();
Tinjau demo berikut untuk informasi lebih lanjut.
Perintah untuk menjalankan tes adalah:
npm test
Setelah itu, jika semua tes berhasil lulus cakupan kode untuk file public-api.ts akan dihasilkan di bawah ./coverage/igniteui-angular-wrappers .
Untuk melihat cakupan kode, Anda dapat membuka salah satu file HTML di bawah ./coverage/igniteui-angular-wrappers/src .
Ignite UI adalah toolset HTML5+ canggih yang membantu Anda membuat aplikasi web modern yang menakjubkan. 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. Terlalu banyak untuk dicantumkan di sini - lihat situs untuk info lebih lanjut dan mengunduh uji coba.
Ignite UI bukan hanya perpustakaan lain yang dibuat di waktu luang seseorang. Ini siap komersial, diuji dengan sangat baik, disetel untuk kinerja terbaik, dirancang untuk UX yang baik, dan didukung oleh Infragistics, sebuah perusahaan yang berfokus pada pengalaman dengan rekam jejak lebih dari 24 tahun pengalaman dalam menyediakan alat antarmuka pengguna yang siap berkinerja tinggi untuk lingkungan, Windows, dan lingkungan seluler.
