igniteui angular wrappers
17.0.0
igniteui-angular Angular! Use os componentes encontrados em projectsigniteui-angular-wrapperssrcpublic-api.ts para usar os controles da interface do IGNITE em aplicações angulares. Trabalhe com as amostras de corrida aqui.
IMPORTANTE O repositório foi renomeado de igniteui-angular2 para igniteui-angular-wrappers . Leia mais sobre nossa nova convenção de nomenclatura.
Para executar as amostras, você precisa de Node.js instalado em sua máquina. Depois, a partir do seu terminal, execute os seguintes comandos:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start igniteui-angular-wrappers depende do pacote ignite-ui-full . Siga este guia sobre como configurar o acesso ao feed npm privado da IGNITE UI e adicione a dependência ao package.json .
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Para começar com a IGNITE UI CLI e os invólucros angulares da 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
Em uma aplicação angular, os controles da interface do usuário do IGNITE suportam a inicialização da marcação, que é feita usando tags personalizadas.
Cada controle implementa um componente de tag personalizado em que o nome da tag é formado dividindo cada letra capital no nome de controle com - símbolo.
NOTA : Recomenda-se usar tags de fechamento ( </ig-combo> ) sobre as tags de fechamento automático ( <ig-combo/> ), porque este último é conhecido por fazer problemas em alguns navegadores (dependendo do modo de documento usado).
| Nome de controle | Marcação |
|---|---|
| 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> |
Existem dois atributos obrigatórios que precisam ser definidos como uma tag IGNITE UI Control Custom: options - aponta para uma propriedade na classe de componente do aplicativo que contém a configuração do controle. widgetId - O controle exige que um ID seja atribuído a ele.
@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
};
}
}
Neste exemplo, o atributo options aponta para a propriedade gridOptions na classe Compoment e widgetId aponta para a propriedade id .
Todas as opções de nível superior podem ser definidas como atributos de uma etiqueta personalizada de controle da interface do usuário do IGNITE. Nesse caso, o atributo options não é obrigatório, mas é permitido. E se options e os atributos de nível superior forem combinados, os atributos de nível superior substituirão options , quando houver propriedades sobrepostas. Também alterar o atributo de nível superior aplicará a alteração ao widget, apenas se a opção for liquidável.
@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';
}
}
Existem duas tags personalizadas <column> e <features> que são usadas em igGrid/igtreegrid/ighierarchGrid para configurar as columns e features opções de acordo.
<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>
Cada um dos recursos das grades também é representado por uma tag personalizada.
| Nome do recurso | Marcação |
|---|---|
| Columnmoving | <column-moving> |
| Filtragem | <filtering> |
| Grupo | <group-by> |
| Escondido | <hiding> |
| CellMerging | <cell-merging> |
| ApndendrowSondemand | <append-rows-on-demand> |
| MulticolumnHeaders | <multi-column-headers> |
| Paginação | <paging> |
| Responsivo | <responsive> |
| Redimensionamento | <resizing> |
| Lotes dos selecionadores | <row-selectors> |
| Seleção | <selection> |
| Classificação | <sorting> |
| Resumos | <summaries> |
| Columnfixing | <column-fixing> |
| Dicas de ferramentas | <tooltips> |
| Atualização | <updating> |
Para alterar mais opções de uma só vez (ou recriar o componente com outro conjunto de opções), a nova configuração pode ser aplicada à propriedade 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" }
]
};
}
}
Neste exemplo, o atributo options aponta para gridOptions e a mudança de referência destruirá a grade, combinará as opções antigas com as novas e criará a grade com as opções combinadas. Observe também que a nova grade terá altura de 400px, mesmo que não esteja definida nas novas opções, devido à combinação com novas opções. Se for necessário desativar uma opção, defina -a como null , undefined , [] ou {} .
A ligação aos eventos de controle é alcançada atribuindo atributos em que o nome do atributo é o nome do nome do evento do controle cercado por parênteses e o valor é o nome do manipulador de eventos.
| Evento | Marcação |
|---|---|
| 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
}
}
A ligação aos eventos do recurso IgGrid* é feita no código de configuração do controle.
@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
}
}
]
};
}
}
Neste exemplo, o evento dataFiltered IGGridFiltering é tratado na classe de componentes do aplicativo.
Os métodos de componentes podem ser chamados acessando o componente a partir da visualização. Por exemplo:
@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);
}
}
Atualmente, os seguintes controles suportam a ligação de dados bidirecional:
Para que a ligação de dados bidirecional ao trabalho, você precisa atribuir a fonte de dados como uma propriedade no modelo. Exemplo:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
NOTA: A ligação de dados bidirecional não funcionará se você usar options.dataSource no arquivo .ts como uma configuração.
Para acionar manualmente a detecção de alterações, use a API markForCheck .
Graças ao @Types/Ignite-UI, é possível criar uma instância de todas as fontes de dados IGNITE UI.
let source = new Infragistics.DataSource(settings);
Esta instância da fonte de dados é concedida com o IntelliSense sobre os métodos do iGDataSource.
source.dataBind();
Revise a demonstração a seguir para obter mais informações.
O comando para executar os testes é:
npm test
Depois disso, se todos os testes passaram com sucesso em uma cobertura de código para o arquivo public-api.ts for gerado na pasta ./coverage/igniteui-angular-wrappers .
Para ver a cobertura do código, você pode abrir um dos arquivos html em ./coverage/igniteui-angular-wrappers/src .
O IGNITE UI é um conjunto avançado de ferramentas HTML5+ que ajuda a criar aplicativos da web modernos e impressionantes. Com base em JQuery e UI jQuery, ele consiste principalmente em controles/widgets de UI ricos e de alto desempenho, como todos os tipos de gráficos, mapas de visualização de dados, (hierárquico, editável) grades, lotes, picker e mais de dados, mais de dados, mais de dados, mais de dados, mais de dados, mais de dados, mais de dados, mais de dados, norma, mais outores, mais ou menos, mais outores, mais ou menos, mais ou menos, mais que são mascarados. Muitos para listar aqui - confira o site para obter mais informações e baixar uma tentativa.
Ignite UI não é apenas mais uma biblioteca criada no tempo livre de alguém. É pronto para o comercial, extremamente bem testado, sintonizado para o melhor desempenho, projetado para o bom UX e apoiado pela Infragistics, uma empresa focada na experiência com um histórico de mais de 24 anos de experiência no fornecimento de ferramentas de interface de usuário prontas para empresas e de alto desempenho para ambientes de web, janelas e móveis.
