igniteui angular wrappers
17.0.0
igniteui-angular Angular Native Composants! Utilisez les composants trouvés dans projectsigniteui-angular-wrapperssrcpublic-api.ts pour utiliser les contrôles d'interface utilisateur Ignite dans les applications angulaires. Travaillez avec les échantillons de course ici.
Important Le référentiel a été renommé igniteui-angular2 à igniteui-angular-wrappers . En savoir plus sur notre nouvelle convention de dénomination.
Pour exécuter les échantillons, vous avez besoin de Node.js installé sur votre machine. Ensuite, à partir de votre terminal, exécutez les commandes suivantes:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers dépend du package sous licence ignite-ui-full . Suivez ce guide sur la configuration de l'accès au flux NPM privé UI Ignite et ajoutez la dépendance au package.json .
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Pour commencer avec l'Ingite UI CLI et les emballages angulaires 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
Dans une application angulaire, les contrôles d'interface utilisateur Ignite prennent en charge l'initialisation du balisage qui se fait en utilisant des balises personnalisées.
Chaque contrôle implémente un composant de balise personnalisé où le nom de balise est formé en divisant chaque lettre de majuscule dans le nom de contrôle avec le - .
Remarque : il est recommandé d'utiliser des balises de clôture ( </ig-combo> ) sur les balises d'auto-fermeture ( <ig-combo/> ), car ces derniers sont connus pour faire des problèmes sur certains navigateurs (selon le mode document utilisé).
| Nom de contrôle | Étiqueter |
|---|---|
| igombo | <ig-combo> |
| iggrid | <ig-grid> |
| Igdatachart | <ig-data-chart> |
| igdialog | <ig-dialog> |
| igdateeditor | <ig-date-editor> |
| igorditor | <ig-editor> |
| igmaskeditor | <ig-mask-editor> |
| Ignméricadiator | <ig-numeric-editor> |
| igpercentediator | <ig-percent-editor> |
| igtexteditor | <ig-text-editor> |
| igdatepicker | <ig-date-picker> |
| igtree | <ig-tree> |
| igmap | <ig-map> |
| igupload | <ig-upload> |
| igvideoplayer | <ig-video-player> |
Il y a deux attributs obligatoires qui doivent être définis sur une balise personnalisée Control Ignite Control: options - pointe vers une propriété de la classe de composants d'application contenant la configuration du contrôle. widgetId - Le contrôle nécessite un ID à lui être attribué.
@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
};
}
}
Dans cet exemple, options Attribut Points sur la propriété gridOptions sur la classe de compoment d'application et widgetId pointe vers la propriété id .
Toutes les options de niveau supérieur sont autorisées à être définies en tant qu'attributs d'une balise personnalisée de contrôle d'interface utilisateur Ignite. Dans ce cas, l'attribut options n'est pas obligatoire, mais elle est autorisée. Et si options et les attributs de niveau supérieur sont combinés, les attributs de niveau supérieur remplaceront options , lorsqu'il y a des propriétés qui se chevauchent. Le changement d'attribut de niveau supérieur appliquera également la modification au widget, uniquement si l'option est réglée.
@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';
}
}
Il existe deux balises personnalisées <column> et <features> qui sont utilisées dans igGrid / igtreegrid / ighierarchicalgrid pour configurer les columns et les options features en conséquence.
<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>
Chacune des fonctionnalités des grilles est également représentée par une balise personnalisée.
| Nom de fonctionnalité | Étiqueter |
|---|---|
| Morsure de colonne | <column-moving> |
| Filtration | <filtering> |
| Groupe | <group-by> |
| Dissimulation | <hiding> |
| Coffre-pour-cellule | <cell-merging> |
| APPENDROWSONDEMAND | <append-rows-on-demand> |
| Multicolumnheaders | <multi-column-headers> |
| Pagination | <paging> |
| Sensible | <responsive> |
| Redimensionnement | <resizing> |
| Selectors | <row-selectors> |
| Sélection | <selection> |
| Tri | <sorting> |
| Résumés | <summaries> |
| Columnfixing | <column-fixing> |
| Infractions | <tooltips> |
| Mise à jour | <updating> |
Afin de modifier plus les options à la fois (ou de recréer le composant avec un autre ensemble d'options), la nouvelle configuration peut être appliquée à la propriété 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" }
]
};
}
}
Dans cet exemple, options Attribut les points aux gridOptions et le changement de référence détruira la grille, combinera les anciennes options avec de nouvelles et créera la grille avec les options combinées. Notez également que la nouvelle grille aura une hauteur de 400px, même si elle n'est pas définie dans les nouvelles options, en raison de la combinaison avec de nouvelles options. Si la désactivation d'une option est requise, définissez-la sur null , undefined , [] ou {} .
Les événements liés aux événements de contrôle sont obtenus en attribuant des attributs où le nom de l'attribut est le nom du nom d'événement du contrôle entouré de parenthèses et la valeur est le nom du gestionnaire d'événements.
| Événement | Balisage |
|---|---|
| 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
}
}
La liaison aux événements de fonctionnalité IGGRID * se fait dans le code de configuration du contrôle.
@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
}
}
]
};
}
}
Dans cet exemple, l'événement dataFiltered IgGridFiltering est géré dans la classe des composants d'application.
Les méthodes de composant peuvent être appelées en accédant au composant à partir de la vue. Par exemple:
@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);
}
}
Les commandes suivantes prennent actuellement en charge la liaison des données bidirectionnelle:
Pour que la liaison de données bidirectionnelle au travail, vous devez attribuer la source de données en tant que propriété dans le modèle. Exemple:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
Remarque: la liaison des données bidirectionnelle ne fonctionnera pas si vous utilisez options.dataSource dans le fichier .ts comme configuration.
Pour déclencher manuellement la détection des changements, utilisez l'API markForCheck .
Grâce à la @ types / ignite-ui, il est possible de créer une instance de toutes les sources de données d'interface utilisateur Ignite.
let source = new Infragistics.DataSource(settings);
Cette instance de source de données est accordée avec Intellisense sur les méthodes d'Igdatasource.
source.dataBind();
Passez en revue la démo suivante pour plus d'informations.
La commande pour exécuter les tests est:
npm test
Après cela, si tous les tests passent avec succès, une couverture de code pour le fichier public-api.ts sera générée dans le dossier ./coverage/igniteui-angular-wrappers .
Pour voir la couverture du code, vous pouvez ouvrir l'un des fichiers HTML sous ./coverage/igniteui-angular-wrappers/src .
Ignite UI est un ensemble d'outils HTML5 + avancé qui vous aide à créer des applications Web époustouflantes et modernes. S'appuyant sur JQuery et JQuery UI, il se compose principalement de commandes / widgets d'interface utilisateur riches en fonctionnalités, tels que toutes sortes de graphiques, les cartes de visualisation des données, les rédacteurs de données (hiérarchiques, modifiables), les grilles de pivot, les rédacteurs améliorés (boîte combo, les éditeurs masqués, l'éditeur HTML, le choix de datte, pour nommer quelques-uns), des liens de données de données flexibles, et un éditeur de datte, pour un peu de datte. Trop de personnes pour l'énumérer ici - consultez le site pour plus d'informations et pour télécharger un essai.
Ignite UI n'est pas seulement une autre bibliothèque créée dans le temps libre de quelqu'un. Il est prêt pour le commerce, extrêmement bien testé, à l'écoute des performances supérieures, conçu pour le bon UX et soutenu par Infragistics, une entreprise axée sur l'expérience avec une expérience de plus de 24 ans d'expérience dans la fourniture d'outils d'interface utilisateur à haute performance prêts à l'entreprise pour les environnements Web, Windows et mobiles.
