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 Private NPM 피드에 대한 액세스 설정에 대한이 안내서를 따르고 package.json 에 종속성을 추가하십시오.
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Ignite UI CLI 및 Ignite UI Angular 포장지로 시작하려면 :
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 Application에서 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> |
| 무시하십시오 | <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> |
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 속성을 가리키고 id 속성을 widgetId 킵니다.
모든 최상위 옵션은 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';
}
}
iggrid/igtreegrid/ighierarchicalgrid에 사용되는 두 가지 사용자 정의 <column> 와 <features> 는 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> |
| 그룹비 | <group-by> |
| 숨김 | <hiding> |
| 셀머링 | <cell-merging> |
| 맹장 | <append-rows-on-demand> |
| 멀티 컬러 헤드 | <multi-column-headers> |
| 페이징 | <paging> |
| 반응 | <responsive> |
| 크기 조정 | <resizing> |
| 선전자 | <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
}
}
]
};
}
}
이 예에서는 IgGridFiltering 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 사용하는 경우 양방향 데이터 바인딩이 작동하지 않습니다.
변경 감지를 수동으로 트리거하려면 markForCheck API를 사용하십시오.
@type/gnite-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+ 도구 세트로 멋진 현대적인 웹 앱을 만들 수 있습니다. jQuery 및 JQuery UI를 기반으로하는 것은 주로 모든 종류의 차트, 데이터 시각화 맵, (계층 적, 편집 가능한) 데이터 그리드, 피벗 그리드, 강화 된 편집자 (콤보 상자, 마스킹 된 편집기, HTML 피커, Date Connecter, Flexible Source), 유연성 데이터 및 Date Connector 및와 같은 기능 풍부하고 고성능 UI 컨트롤/위젯으로 구성됩니다. 여기에 나열하기에는 너무 많으므로 자세한 정보는 사이트를 확인하고 시험을 다운로드하십시오.
Ignite UI는 누군가의 자유 시간에 생성 된 다른 도서관이 아닙니다. 상업용 준비, 매우 잘 테스트되고 최고 성능을 조정하고 Good UX 용으로 설계되었으며 Web, Windows 및 모바일 환경에 대한 엔터프라이즈 준비, 고성능 사용자 인터페이스 도구를 제공 한 24 년 이상의 경험에 대한 경험 중심 회사 인 Infragistics의 지원을받습니다.
