You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`IgxChatComponent` provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI.
28
+
<ApiLinktype="Chat" /> provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI.
29
29
30
30
For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
31
31
@@ -85,8 +85,8 @@ The Chat component exposes several key properties that let you control its state
|`messages`| Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. |
87
87
|`draftMessage`| The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. |
88
-
|`options`| Chat configuration (`IgxChatOptions`) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. |
89
-
|`templates`| Custom Angular templates (`IgxChatTemplates`) for message content, input, attachments, and other parts of the chat UI. |
88
+
|`options`| Chat configuration (<ApiLinktype="ChatOptions"kind="type"suffix={false} />) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. |
89
+
|`templates`| Custom Angular templates (<ApiLinktype="ChatTemplates"kind="type"suffix={false} />) for message content, input, attachments, and other parts of the chat UI. |
90
90
91
91
These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend.
92
92
@@ -168,7 +168,7 @@ This level of granularity means you can tweak just one part (for example, how at
168
168
169
169
Here:
170
170
-`let-message` exposes the message object.
171
-
- The `igxChatMessageContext` directive ensures proper typing for message templates.
171
+
- The <ApiLinktype="ChatMessageContextDirective"suffix={false}label="igxChatMessageContext" /> directive ensures proper typing for message templates.
172
172
173
173
#### Custom Input Area
174
174
By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button:
@@ -435,12 +435,12 @@ Finally, **include** the custom theme in your application:
@@ -56,19 +57,17 @@ Or just set the respective properties in the html instead of using a `@ViewChild
56
57
<DocsAsidetype="info">
57
58
The sort/filter states of the Grid Lite component are kept when changing the data source in this manner.
58
59
</DocsAside>
59
-
Usually you will want to reset them by calling either **`clearSort()`**and/or **`clearFilter()`**.
60
+
Usually you will want to reset them by calling either <ApiLinktype="GridLite"member="clearSort"label="clearSort()" /> and/or <ApiLinktype="GridLite"member="clearFilter"label="clearFilter()" />.
60
61
61
62
In the sample below, the grid has column auto-generation enabled. When you click on the switch data button,
62
63
the column collection is reset, and a new data source is bound to the grid.
63
64
64
65
<Samplesrc="/grid-lite/data-binding-dynamic"height={510}alt="Angular Grid Lite Data Binding Example" />
@@ -117,7 +118,7 @@ Keep in mind the more complex and involved the template is, the greater the perf
117
118
118
119
## Cell Context Object
119
120
120
-
The custom cell renderer is passed an **`GridLiteCellContext`** object as a parameter with the following props:
121
+
The custom cell renderer is passed an <ApiLinktype="GridLiteCellTemplateContext"kind="type"suffix={false} /> object as a parameter with the following props:
The building blocks for filter operations in the grid is the **`FilterExpression`** which has the following structure:
46
+
The building blocks for filter operations in the grid is the <ApiLinktype="GridLiteFilteringExpression"kind="type"suffix={false} /> which has the following structure:
The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the **`GridLite.filter()`**/**`GridLite.clearFilter()`**methods or through the **`Grid.Lite.filterExpressions`** property.
83
+
The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the <ApiLinktype="GridLite"member="filter"label="filter()" />/<ApiLinktype="GridLite"member="clearFilter"label="clearFilter()" /> methods or through the <ApiLinktype="GridLite"member="filterExpressions" /> property.
83
84
84
85
The **`filter()`** method accepts either a single expression or an array of filter expression and then filters the grid data
85
86
based on those expressions.
@@ -107,7 +108,7 @@ grid.clearFilter();
107
108
108
109
## Initial Filter State
109
110
110
-
The **`filterExpressions`** property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered.
111
+
The <ApiLinktype="GridLite"member="filterExpressions"label="filterExpressions" /> property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered.
In cases where filtering must be done remotely or you want to save the current state/data to a server somewhere,
156
157
the Grid Lite exposes a hook where you can implement and customize this behavior.
157
158
158
-
Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object.
159
+
Using the <ApiLinktype="GridLite"member="dataPipelineConfiguration"label="dataPipelineConfiguration" /> property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object.
159
160
160
161
```typescript
161
162
exporttypeDataPipelineParams<Textendsobject> = {
@@ -184,11 +185,11 @@ The following example mocks remote filter operation, reflecting the REST endpoin
184
185
185
186
<Samplesrc="/grid-lite/filtering-pipeline"height={510}alt="Angular Grid Lite Filtering Config Remote" />
<Samplesrc="/grid-lite/overview"height={510}alt="Angular Grid Lite App Sample Main" />
28
29
29
30
## Installation and Setup
30
-
To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. IgxGridLiteComponent provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI.
31
+
To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. <ApiLinktype="GridLite" /> provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI.
@@ -184,7 +185,7 @@ In the following sample, when you try to sort the **Name** and **Rating** column
184
185
185
186
In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior.
186
187
187
-
Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object.
188
+
Using the <ApiLinktype="GridLite"member="dataPipelineConfiguration"label="dataPipelineConfiguration" /> property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object.
188
189
189
190
```typescript
190
191
exporttypeDataPipelineParams<Textendsobject> = {
@@ -213,12 +214,10 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
213
214
214
215
<Samplesrc="/grid-lite/sorting-pipeline"height={510}alt="Angular Grid Lite Sorting Config Pipeline" />
0 commit comments