+
+ Ignite UI
+Angular Wrappers Components
Ignite UI
-Angular Wrappers Components
--
-
- - View on GitHub - - -
-
+
- + View on GitHub + + +
Samples
igCombo
--
-
-
- Enter a Product ID in the textbox and see how the combos change -
- Change a product's name in the group of textboxes below and see how the names change in each combo - -
This sample demonstrates how to use Angular Components to create igCombos.
- -igCombo
++
-
+
- Enter a Product ID in the textbox and see how the combos change +
- Change a product's name in the group of textboxes below and see how the names change in each combo + +
This sample demonstrates how to use Angular Components to create igCombos.
+ +-
Edit Product Name
-+
Edit Product Name
+igGrid
This sample demonstrates how to call Angular components API methods.
- -This sample demonstrates how to call Angular components API methods.
+ +igGrid
This sample demonstrates how Ignite UI Angular Wrappers components are used to initialize the - igGrid complex options though the template.
- -This sample demonstrates how Ignite UI Angular Wrappers components are used to initialize the + igGrid complex options though the template.
+ +- - -
- {{idHeaderText}} +
+ + +
+ {{idHeaderText}}
igGrid
-
-
-
- Add a new product either through the grid's UI or the form on the right of the grid -
- Change a product's name in the group of textboxes below and see how the names change in the grid -
- Delete a product either through the grid's UI or with the button next to each product in the table under the grid -
This sample demonstrates how Ignite UI Angular Wrappers components are used with the igGrid to allow for two-way binding in the grid.
- -+
-
+
- Add a new product either through the grid's UI or the form on the right of the grid +
- Change a product's name in the group of textboxes below and see how the names change in the grid +
- Delete a product either through the grid's UI or with the button next to each product in the table under the grid +
This sample demonstrates how Ignite UI Angular Wrappers components are used with the igGrid to allow for two-way binding in the grid.
+ +Add Product
+Add Product
--
| Product ID | -Name | -Quantity per unit | -Unit Price | -- |
|---|---|---|---|---|
| Product ID | +Name | +Quantity per unit | +Unit Price | ++ |
| {{product.ProductID}} | -- | {{product.QuantityPerUnit}} | -- | - | + @for (product of data; track product) { +
| {{product.ProductID}} | ++ | {{product.QuantityPerUnit}} | ++ | + |
igGrid
- +- This sample demonstrates how to configure IgGrid Component to talk to remote server. It is based on the HTTP Client demo with Observables. - It is using in-memory web API simulator, to avoid the hassle in creating web API server. - There is also an ability to create new products and send them to the backend. -
-- The grid is created when bound to an empty data source and then using a service to populate the data. -
- -+ This sample demonstrates how to configure IgGrid Component to talk to remote server. It is based on the HTTP Client demo with Observables. + It is using in-memory web API simulator, to avoid the hassle in creating web API server. + There is also an ability to create new products and send them to the backend. +
++ The grid is created when bound to an empty data source and then using a service to populate the data. +
+ +-
igTree
-
-
-
- Add and remove nodes from the tree using the buttons -
- Edit product names and see how the tree responds -
This sample demonstrates how to create an igTree with an Ignite UI Angular Wrappers component. -
- -+
-
+
- Add and remove nodes from the tree using the buttons +
- Edit product names and see how the tree responds +
This sample demonstrates how to create an igTree with an Ignite UI Angular Wrappers component. +
+ +| {{pc.ProductCategoryID}} | -- | - |
-
-
-
-
-
- {{pc.ProductSubcategories.length}}
-
-
-
-
+
+ @for (pc of data; track pc; let i = $index) {
+ {{pc.ProductCategoryID}} |
+
+ |
+ |
+ |
-
-
+
+
+
+ {{pc.ProductSubcategories.length}}
- -
-
-
-
+
-
-
-
-
+
+
+
+
+ + @for (ps of pc.ProductSubcategories; track ps; let j = $index) { +
+
-
+
+
+
+
+
+ |