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
{{ message }}
This repository was archived by the owner on May 20, 2023. It is now read-only.
Most selection widgets care about two data points: what is selectable and what is selected.
3
+
Most selection widgets care about two data points: what is selectable and what
4
+
is selected.
4
5
5
-
In ACX selection widgets, what is selectable is represented by the [`SelectionOptions`](https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/model/selection/selection_options.dart) interface, while what is selected is represented by the [`SelectionModel`](https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/model/selection/selection_model.dart) interface. Material auto select input uses these two interfaces via the `selectionOptions` and `selection` inputs, but additionally it has `inputText` which presents the text the user has entered.
6
+
In ACX selection widgets, what is selectable is represented by the
interface. Material auto select input uses these two interfaces via the
11
+
`selectionOptions` and `selection` inputs, but additionally it has `inputText`
12
+
which presents the text the user has entered.
6
13
7
-
Which input combinations to use for Material Auto Suggest Input depends on your use case.
14
+
Which input combinations to use for Material Auto Suggest Input depends on your
15
+
use case.
8
16
9
-
If you are using the component to accept user entered content, and the list of options is used to assist content entry, you want to use `selectionOptions` and `inputText`. Together with the `inputTextChange` output, you can setup two-way binding for the input text.
17
+
If you are using the component to accept user entered content, and the list of
18
+
options is used to assist content entry, you want to use `selectionOptions` and
19
+
`inputText`. Together with the `inputTextChange` output, you can setup two-way
20
+
binding for the input text.
10
21
11
22
HTML:
12
-
```
23
+
24
+
```html
13
25
<material-auto-suggest-input
14
26
[selectionOptions]="myOptions"
15
27
[(inputText)]="myInput"
@@ -18,17 +30,22 @@ HTML:
18
30
```
19
31
20
32
Dart:
21
-
```
33
+
34
+
```dart
22
35
class MyView {
23
36
final myOptions = ['Foo', 'Bar', 'Baz'];
24
37
String myInput = 'Bar';
25
38
}
26
39
```
27
40
28
-
If you are using the component to select one or more items from a list of options, and the input is used for filtering, you want to use `selectionOptions` and `selection`. Together with the `selectionChange` output, you can setup two-way binding for the selected value.
41
+
If you are using the component to select one or more items from a list of
42
+
options, and the input is used for filtering, you want to use `selectionOptions`
43
+
and `selection`. Together with the `selectionChange` output, you can setup
44
+
two-way binding for the selected value.
29
45
30
46
HTML:
31
-
```
47
+
48
+
```html
32
49
<material-auto-suggest-input
33
50
[selectionOptions]="myOptions"
34
51
[(selection)]="mySelection"
@@ -37,7 +54,8 @@ HTML:
37
54
```
38
55
39
56
Dart:
40
-
```
57
+
58
+
```dart
41
59
class MyView {
42
60
final myOptions = [1, 2, 3];
43
61
int mySelection = 2;
@@ -46,20 +64,34 @@ class MyView {
46
64
47
65
# The selectionOptions input
48
66
49
-
The `selectionOptions` input accepts either a `SelectionOptions` class or a generic `List`.
67
+
The `selectionOptions` input accepts either a `SelectionOptions` class or a
68
+
generic `List`.
50
69
51
-
If a `List` is passed, a [`StringSelectionOptions`](https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/model/selection/string_selection_options.dart) will be created with the list and the `ItemRenderer` if specified to support basic filtering.
will be created with the list and the `ItemRenderer` if specified to support
73
+
basic filtering.
52
74
53
-
If you need more advanced features, like grouped options, custom filtering or async search, you could also pass an implementation of `SelectionOptions`.
75
+
If you need more advanced features, like grouped options, custom filtering or
76
+
async search, you could also pass an implementation of `SelectionOptions`.
54
77
55
78
# The selection input & output
56
79
57
-
The `selection` input accepts either a `SelectionModel`, a selected value or null.
80
+
The `selection` input accepts either a `SelectionModel`, a selected value or
81
+
null.
58
82
59
-
By default Material Auto Suggest Input uses [`SingleSelectionModel`](https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/src/model/selection/single_selection_model_impl.dart). If a selected value is passed to the `selection` input, this value will be selected by the default selection model. If a null value is passed to the input, the default selection model will clear the selection.
If a selected value is passed to the `selection` input, this value will be
86
+
selected by the default selection model. If a null value is passed to the input,
87
+
the default selection model will clear the selection.
60
88
61
-
If you need to use a `MultiSelectionModel` or a custom implementation of `SelectionModel`, you could also use the same input.
89
+
If you need to use a `MultiSelectionModel` or a custom implementation of
90
+
`SelectionModel`, you could also use the same input.
62
91
63
-
The `selectionChange` output emits the selected value(s) whenever selection changes. For single select, it will either be the selected value or null. For multi select, it will a list of selected values or an empty list.
92
+
The `selectionChange` output emits the selected value(s) whenever selection
93
+
changes. For single select, it will either be the selected value or null. For
94
+
multi select, it will a list of selected values or an empty list.
64
95
65
-
For simpler single select use cases, you can use the `[(selection)]` syntax to setup two-way binding for your selected value.
96
+
For simpler single select use cases, you can use the `[(selection)]` syntax to
0 commit comments