Skip to content

Commit 8039216

Browse files
docs(combo,simple-combo): add/update readme
1 parent 272863d commit 8039216

File tree

3 files changed

+343
-25
lines changed

3 files changed

+343
-25
lines changed

README.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,30 @@
66
[![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)
77
[![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
88

9-
[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits, supporting directives for [Angular](https://angular.io/) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) targeting Google's Angular framework.
9+
[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits, supporting directives for [Angular](https://angular.io/) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) targeting Google's Angular framework.
1010

1111
You can find source files under the [`src`](https://github.com/IgniteUI/igniteui-angular/tree/master/src) folder, including samples and tests.
1212

13-
13+
1414
### Angular Data Grid Overview
1515

16-
The Ignite UI for [Angular Data Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) equips you with all the necessary features for manipulating and visualizing tabular data in a series of rows and columns with ease. You can find powerful grid elements for no-lag scrolling while rendering and going through millions of data points.
16+
The Ignite UI for [Angular Data Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) equips you with all the necessary features for manipulating and visualizing tabular data in a series of rows and columns with ease. You can find powerful grid elements for no-lag scrolling while rendering and going through millions of data points.
1717

18-
Built for optimization and speed, our [Angular grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) component lets you quickly bind data with very little code and allows you to implement a variety of events in order to tailor different behaviors.
18+
Built for optimization and speed, our [Angular grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) component lets you quickly bind data with very little code and allows you to implement a variety of events in order to tailor different behaviors.
1919

2020
#### [View running Grid samples here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)
2121

2222
### Angular Charts & Graphs Overview
2323

24-
Ignite UI for Angular arrives with an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your modern web and mobile apps. All of them are designed to work flawlessly on every modern browser and provide complete touch as well as interactivity. Our comprehensive [Angular Charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview) component supports more than 65 chart types that let you display all sorts of data representations and statistics. And with the rich and easy-to-use API, you can plot various types of charts.
24+
Ignite UI for Angular arrives with an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your modern web and mobile apps. All of them are designed to work flawlessly on every modern browser and provide complete touch as well as interactivity. Our comprehensive [Angular Charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview) component supports more than 65 chart types that let you display all sorts of data representations and statistics. And with the rich and easy-to-use API, you can plot various types of charts.
2525

26-
Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.
26+
Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.
2727

2828
### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/indigo-design/app-builder)
2929
![5661 drag drop](https://user-images.githubusercontent.com/1472513/132676597-09eec222-42f7-40ff-bd0d-fe8b91fd0c1c.gif)
3030
### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/indigo-design/app-builder)
3131
![0871 change-preview-code](https://user-images.githubusercontent.com/1472513/132676607-3851f308-416b-45d6-99bc-c34266b55c44.gif)
32-
32+
3333
### Current List of Components Include:
3434

3535
|Components|Status|||Directives|Status|||
@@ -63,6 +63,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
6363
|navigation drawer|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)|||||
6464
|radio|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/radio/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio-button)|||||
6565
|select|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)|||||
66+
|simple-combo|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/simple-combo/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/simple-combo)|||||
6667
|slider|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)|||||
6768
|snackbar|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/snackbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)|||||
6869
|stepper|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper)|
@@ -237,14 +238,14 @@ Developer support is provided as part of the commercial, paid-for license via [I
237238
Community support for open source usage of this product is available at [StackOverflow](https://stackoverflow.com/questions/tagged/ignite-ui-angular).
238239

239240
## License
240-
This is a commercial product, requiring a valid paid-for license for commercial use.
241+
This is a commercial product, requiring a valid paid-for license for commercial use.
241242
This product is free to use for non-commercial educational use for students in K through 12 grades or University programs, and for educators to use in a classroom setting as examples / tools in their curriculum.
242243
In order for us to verify your eligibility for free usage, please [register for trial](https://Infragistics.com/Angular) and open a support ticket with a request for free license.
243244

244-
To acquire a license for commercial usage, please [register for trial](https://Infragistics.com/Angular) and refer to the purchasing options in the pricing section on the product page.
245+
To acquire a license for commercial usage, please [register for trial](https://Infragistics.com/Angular) and refer to the purchasing options in the pricing section on the product page.
245246

246-
© Copyright 2020 INFRAGISTICS. All Rights Reserved.
247-
The Infragistics Ultimate license & copyright applies to this distribution.
247+
© Copyright 2020 INFRAGISTICS. All Rights Reserved.
248+
The Infragistics Ultimate license & copyright applies to this distribution.
248249
For information on that license, please go to our website [https://www.infragistics.com/legal/license](https://www.infragistics.com/legal/license).
249250

250251

projects/igniteui-angular/src/lib/combo/README.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ The igx-combo exposes intuitive keyboard navigation and it is accessibility comp
77
Drop Down items are virtualized, which guarantees smooth work, even if the igx-combo is bound to data source with a lot of items.
88

99

10-
`igx-combo` is a component.
10+
`igx-combo` is a component.
1111
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)
1212

1313
# Usage
@@ -24,17 +24,17 @@ Remote binding, defining `valueKey` and `displayKey`, and exposing `dataPreLoad`
2424
```
2525

2626
```typescript
27-
public ngOnInit() {
27+
public ngOnInit(): void {
2828
this.remoteData = this.remoteService.remoteData;
2929
}
3030

31-
public ngAfterViewInit() {
31+
public ngAfterViewInit(): void {
3232
this.remoteService.getData(this.combo.virtualizationState, (data) => {
3333
this.combo.totalItemCount = data.length;
3434
});
3535
}
3636

37-
public dataLoading(evt) {
37+
public dataLoading(evt): void {
3838
if (this.prevRequest) {
3939
this.prevRequest.unsubscribe();
4040
}
@@ -46,7 +46,7 @@ public dataLoading(evt) {
4646
}
4747
```
4848

49-
> Note: In order to have combo with remote data, what you need is to have a service that retrieves data chunks from a server.
49+
> Note: In order to have combo with remote data, what you need is to have a service that retrieves data chunks from a server.
5050
What the combo exposes is a `virtualizationState` property that gives state of the combo - first index and the number of items that needs to be loaded.
5151
The service, should inform the combo for the total items that are on the server - using the `totalItemCount` property.
5252

@@ -67,9 +67,9 @@ export class MyCombo {
6767
public combo: IgxComboComponent;
6868
public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
6969
...
70-
ngOnInit() {
70+
public ngOnInit(): void {
7171
// Selection is done only by valueKey property value
72-
this.combo.selectItems([0, 1]);
72+
this.combo.select([0, 1]);
7373
}
7474
}
7575
```
@@ -80,8 +80,8 @@ export class MyCombo {
8080
```
8181
```typescript
8282
export class MyCombo {
83-
ngOnInit() {
84-
this.combo.selectItems(this.data[0], this.data[1]);
83+
public ngOnInit(): void {
84+
this.combo.select([this.data[0], this.data[1]]);
8585
}
8686
}
8787
```
@@ -166,7 +166,7 @@ Defining a combo's groupKey option will group the items, according to that key.
166166

167167
### Templates
168168
Templates for different parts of the control can be defined, including items, header and footer, etc.
169-
When defining one of the them, you need to reference list of predefined names, as follows:
169+
When defining one of them, you need to reference list of predefined names, as follows:
170170

171171
#### Defining item template:
172172
```html
@@ -289,7 +289,7 @@ When igxCombo is opened, allow custom values are enabled and add item button is
289289

290290
## Display Density
291291
**igx-combo** supports setting of different display densities.
292-
Display density is received through Angular's DI engine or can be set through the `[displayDensity]` input. The possilbe display densities are `compact`, `cosy` and `comfortable` (default).
292+
Display density is received through Angular's DI engine or can be set through the `[displayDensity]` input. The possible display densities are `compact`, `cosy` and `comfortable` (default).
293293
Setting `[displayDensity]` affects the control's items' and inputs' css properties, most notably heights, padding, font-size.
294294

295295
## API
@@ -349,8 +349,8 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
349349
| `close` | Closes drop down | `void` | `None` |
350350
| `toggle` | Toggles drop down | `void` | `None` |
351351
| `selectedItems` | Get current selection state | `any[]` | `None` |
352-
| `selectItems` | Select defined items | `void` | items: `any[]`, clearCurrentSelection: `boolean` |
353-
| `deselectItems` | Deselect defined items | `void` | items: `any[]` |
352+
| `select` | Select defined items | `void` | items: `any[]`, clearCurrentSelection: `boolean` |
353+
| `deselect` | Deselect defined items | `void` | items: `any[]` |
354354
| `selectAllItems` | Select all (filtered) items | `void` | ignoreFilter?: `boolean` - if `true` selects **all** values |
355355
| `deselectAllItems` | Deselect (filtered) all items | `void` | ignoreFilter?: `boolean` - if `true` deselects **all** values |
356-
| `setSelectedItem` | Toggles (select/deselect) an item by key | `void` | itemID: any, select = true, event?: Event |
356+
| `selected` | Toggles (select/deselect) an item by key | `void` | itemID: any, select = true, event?: Event |

0 commit comments

Comments
 (0)