Example for ngx-mat-select-search with grouping option

[vijaychhajer]

Hi Mat,

It will be really helpful if you could please share example for ngx-mat-select-search with grouping option (Select with option groups).

Thanks,
Vijay

[macjohnny]

@vjpc thanks for the suggestion. would you like to try and create such an example?

[vijaychhajer]

@macjohnny I am new to angular and tried with your github code to modify it for group but finding difficult to do it. It will be really nice if you can share one. Thanks.

[st-clair-clarke]

@macjohnny @vjpc
I too would like to have an example for the mat-select with groups. I have been also unsuccessful in generating a filttered select with the groups.

For @macjohnny, instead of using an array of inputs such as your Bank[] array, the shape of the input will now have to be like the one below:

export interface Pokemon {
  value: string;
  viewValue: string;
}

export interface PokemonGroup {
  disabled?: boolean;
  name: string;
  pokemon: Pokemon[];
}

An example is at https://material.angular.io/components/select/overview

Were you succesful @vjpc? I would also like to see your example.

For me the problem is discussed below:
ngx-mat-select-search form field is

           <mat-form-field>
              <mat-select [formControl] = "bankMultiCtrl"
                          placeholder = "Banks"
                          [multiple] = "true"
                          #multiSelect>
                <ngx-mat-select-search [formControl] = "bankMultiFilterCtrl"></ngx-mat-select-search>
                <mat-option 
                    *ngFor = "let bank of filteredBanksMulti | async"  [value] = "bank">
                  {{bank.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>

For me to use groups, the same code would be similar to below:

         <mat-select
                [placeholder] = 'placeholder'
                [required] = 'required'
                formControlName = "selector"
                [multiple] = 'multiple'>

              <mat-optgroup
                  *ngFor = "let group of groups"
                  [label] = "group.name"
                  [disabled] = "group.disabled">

                <mat-option
                    *ngFor = "let option of group.options"
                    [value] = "option.value">
                  {{option.viewValue}}
                </mat-option>
              </mat-optgroup>
            </mat-select>

The question is how do I convert the last snippet to be usable with ngx-mat-select?

Cheers

[maechler]

@st-clair-clarke You can place the ngx-mat-select-search component, just as you would without option groups, as the first child of mat-select. The model and the filter function look a little different then in the existing examples however. I will add an example for this.

[st-clair-clarke]

Thanks. Looking forward to your working example ASAP.

Cheers

[maechler]

@st-clair-clarke I added an example: a07e911

It is not perfect yet as it needs to copy the option groups. If you have any suggestions to improve the example, please let me know! See also #66

[st-clair-clarke]

Thanks for your help. Working great. I saw where I was making the mistakes. Still tweaking. I will suggest improvement as I go along.

[st-clair-clarke]

Hi.
Again appreciate your help. I am going to request some tweaking to keep your package more in line with material2 select. Please let me know what you think.

Compare your domain models to that of material2 for the select component:

interface Bank {
  id: string;
  name: string;
}

... would/should ? represent the shape of a select option as shown below:

export interface ISelectOption {
  value: string
  viewValue: string
}

.. your

interface BankGroup {
  name: string;
  banks: Bank[];
}

... would/should ? represent the shape of a select option group:

export interface ISelectOptionGroup {
  disabled?: boolean
  icon?: string
  name: string
  options: Array<ISelectOption>
}

If this is done then your package would be using similar models to material2 select. For a long group, such as some of mine, the id property of the Bank model is creating a challenge for finding unique names.

Do let me know what you think. And thanks again.

NB: The reason I am proposing the tweak is because I have a lot of select models that I would have to port to your model. I don't know how the suggestion would affect you or others using the package. It would be nice to hear from them also.

Cheers

[maechler]

@st-clair-clarke Thanks for your suggestion. I think it could make sense to adopt the examples to the material2 interfaces. But as these are just examples, it should easily be possible to use your own material2 model with ngx-mat-select-search. You just have to adapt the template and filter functions accordingly.

[st-clair-clarke]

I will do that.

NB. Could you please expose the place holder for the search box. Currently it is always saying 'Suche'.

Cheers

[st-clair-clarke]

Adjust to material2 interface - Done!

[maechler]

@st-clair-clarke Please see https://github.com/bithost-gmbh/ngx-mat-select-search#labels to change the placeholder label.

[vijaychhajer]

@st-clair-clarke I had a very specific requirement for grouping and found it difficult to implement using ngx-mat-select. So instead used the mat-autocomplete.

[st-clair-clarke]

@vjpc Hi vjpc. Are you saying that you use the mat-autocomplete to implement a form of grouping selection? Could you please share an example, preferable a link to a stackblitz demo?
Cheers

[macjohnny]

example added in #66