igniteui angular wrappers
17.0.0
igniteui-angular Angular Native Winkelkomponenten! Verwenden Sie die Komponenten in projectsigniteui-angular-wrapperssrcpublic-api.ts um die INGITE-UI-Steuerelemente in Winkelanwendungen zu verwenden. Arbeiten Sie hier mit den Laufmustern.
Wichtig, dass das Repository in igniteui-angular2 in igniteui-angular-wrappers umbenannt wurde. Lesen Sie mehr über unsere neue Namenskonvention.
Um die Samples auszuführen, benötigen Sie Node.js auf Ihrem Computer installiert. Führen Sie danach aus Ihrem Terminal die folgenden Befehle aus:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers hängen vom ignite-ui-full -lizenzierten Paket ab. Befolgen Sie diese Anleitung zum Einrichten des Zugriffs auf den privaten NPM -Feed Ignite UI und fügen Sie die Abhängigkeit zum package.json hinzu.
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Um mit der Ignite UI CLI und den Ignite UI Angular Wrappers zu beginnen:
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
In einer Winkelanwendung unterstützt die Ignite -UI -Steuerelemente die Markup -Initialisierung, die mit benutzerdefinierten Tags durchgeführt wird.
Jede Steuerung implementiert eine benutzerdefinierte Tag -Komponente, bei der der Tag -Name gebildet wird, indem jeder Großbuchstaben im Kontrollnamen mit - Symbol aufgeteilt wird.
HINWEIS : Es wird empfohlen, Schließen von Tags ( </ig-combo> ) gegenüber den selbstklingenden Tags ( <ig-combo/> ) zu verwenden, da dies bekannt ist, dass letztere Probleme in einigen Browsern machen (abhängig vom verwendeten Dokumentmodus).
| Kontrollname | Etikett |
|---|---|
| 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> |
| igelpload | <ig-upload> |
| Igvideoplayer | <ig-video-player> |
Es gibt zwei obligatorische Attribute, die auf ein benutzerdefiniertes Tag der UI -Steuerung eingestellt werden müssen: options - zeigt auf eine Eigenschaft in der Anwendungskomponentenklasse, die die Konfiguration des Steuerelements enthält. widgetId - Die Steuerung erfordert, dass eine ID zugewiesen wird.
@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
};
}
}
In diesem Beispiel zeigt options , die die Eigenschaft gridOptions in der Anwendungskompomentklasse und widgetId auf die id -Eigenschaft verweist.
Alle Optionen auf höchster Ebene dürfen als Attribute eines individuellen Tags für UI -Steuerung festgelegt werden. In diesem Fall ist options Attribut nicht obligatorisch, aber es ist erlaubt. Und wenn beide options und Attribute auf höchstem Niveau kombiniert werden, überschreiben Top-Level-Attribute options , wenn überlappende Eigenschaften vorliegen. Durch das Ändern des Attributs auf oberster Ebene wird auch die Änderung auf das Widget angewendet, wenn die Option eingehaltbar ist.
@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';
}
}
Es gibt zwei benutzerdefinierte Tags <column> und <features> , die in iggrid/igtreegrid/ighierarchicalgrid verwendet werden, um die columns und features -Optionen entsprechend zu konfigurieren.
<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>
Jedes der Gitterfunktionen wird auch durch ein benutzerdefiniertes Tag dargestellt.
| Feature -Name | Etikett |
|---|---|
| Columntropy | <column-moving> |
| Filterung | <filtering> |
| Groupby | <group-by> |
| Versteckt | <hiding> |
| Zellmut | <cell-merging> |
| AppendrowsonDemand | <append-rows-on-demand> |
| Multikolenheader | <multi-column-headers> |
| Paging | <paging> |
| Reaktionsschnell | <responsive> |
| Größenänderung | <resizing> |
| ROWSELEKTORS | <row-selectors> |
| Auswahl | <selection> |
| Sortierung | <sorting> |
| Zusammenfassungen | <summaries> |
| ColumnFixing | <column-fixing> |
| Tooltips | <tooltips> |
| Aktualisierung | <updating> |
Um die weiteren Optionen gleichzeitig zu ändern (oder die Komponente mit einem weiteren Satz von Optionen neu zu erstellen), kann die neue Konfiguration auf die options angewendet werden.
@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" }
]
};
}
}
In diesem Beispiel options -Attributpunkten für gridOptions und die Änderung der Referenz werden das Netz zerstören, die alten Optionen mit neuen kombinieren und das Netz mit den kombinierten Optionen erstellen. Beachten Sie auch, dass das neue Raster aufgrund der Kombination mit neuen Optionen eine Höhe von 400 PX aufweist, obwohl es nicht in die neuen Optionen definiert ist. Wenn die Deaktivierung einer Option erforderlich ist, setzen Sie sie auf null , undefined , [] oder {} .
Die Bindung an die Steuerungsereignisse wird erreicht, indem Attribute zugewiesen werden, bei denen der Name des Attributs der Name des Ereignisnamens des Kontrolls ist, der von Klammern umgeben ist, und der Wert der Name des Ereignishandlers.
| Ereignis | 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
}
}
Bindung an Iggrid* Feature -Ereignisse erfolgt im Konfigurationscode des Steuerelements.
@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
}
}
]
};
}
}
In diesem Beispiel wird das iggridfiltering dataFiltered -Ereignis in der Anwendungskomponentenklasse behandelt.
Komponentenmethoden können aufgerufen werden, indem Sie auf die Komponente aus der Ansicht zugreifen. Zum Beispiel:
@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);
}
}
Die folgenden Steuerelemente unterstützen derzeit die Bindung von Zwei-Wege-Daten:
Für die Bindung von Arbeiten zur Arbeit müssen Sie die Datenquelle als Eigenschaft in der Vorlage zuweisen. Beispiel:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
HINWEIS: Zwei-Wege-Datenbindung funktioniert nicht, wenn Sie options.dataSource verwenden. DataSource in der .ts-Datei als Konfiguration.
Um die Erkennung von Änderungen manuell auszulösen, verwenden Sie die markForCheck -API.
Dank der @typen/ignite-ui ist es möglich, eine Instanz der gesamten Ignite UI-Datenquellen zu erstellen.
let source = new Infragistics.DataSource(settings);
Diese Datenquelleninstanz wird intellisese über IgdataSource -Methoden gewährt.
source.dataBind();
Weitere Informationen finden Sie in der folgenden Demo.
Der Befehl zum Ausführen der Tests lautet:
npm test
Danach werden alle Tests erfolgreich eine Codeabdeckung für die Datei public-api.ts Datei unter dem Ordner ./coverage/igniteui-angular-wrappers generiert.
Um die Codeabdeckung zu sehen, können Sie eine der HTML-Dateien unter ./coverage/igniteui-angular-wrappers/src öffnen.
Ignite UI ist ein erweitertes HTML5+ Toolset, mit dem Sie atemberaubende, moderne Web -Apps erstellen können. Aufbauend auf Jquery und JQuery UI besteht sie hauptsächlich aus Feature-reichhaltigen, leistungsstarken UI-Steuerelementen/Widgets, wie z. Zu viele, um sie hier aufzulisten - finden Sie in der Website weitere Informationen und können Sie eine Testversion herunterladen.
Ignite UI ist nicht nur eine andere Bibliothek, die in der Freizeit von jemandem erstellt wurde. Es ist kommerziell fähig, sehr gut getestet, für die Top-Leistung abgestimmt, für gute UX entwickelt und von Infragistics unterstützt, ein erfahrungsorientiertes Unternehmen mit einer Erfolgsgeschichte von über 24 Jahren Erfahrung in der Bereitstellung von Unternehmen mit leistungsstarker, leistungsstarker Benutzeroberfläche für Web-, Windows und mobile Umgebungen.
