[FEATURE] Directive to make "faster and easier" use of this component.

[andreElrico]

I wrote a directive that makes it more convinient to use this component.

My Question: Everything seems to work. However: I did not include this piece of code yet: Where could this bite me ? I dont really know what thats doing to be honest:

  ngAfterViewInit() {
    this.setInitialValue();
  }

  protected setInitialValue() {
    this._filteredValuesSubject
      .pipe(
        take(1),
        takeUntil(this._onDestroy)
      )
      .subscribe(() => {
        // setting the compareWith property to a comparison function
        // triggers initializing the selection according to the initial value of
        // the form control (i.e. _initializeSelection())
        // this needs to be done after the filteredBanks are loaded initially
        // and after the mat-option elements are available
        this.multiSelect.compareWith = this._compareWith;
      });
  }

• Stackblitz to directive https://stackblitz.com/edit/github-gtncrt?file=src%2Fapp%2Fexamples%2Fmat-select-auto.directive.ts

[macjohnny]

@andreElrico thanks for sharing the code. it would be great to include it in this repo, don't you think so? would you want to file a PR with an example?

concerning your question: the code is necessary to set the initial selection. without it, the initial selection of the mat-select element will be empty

[andreElrico]

I think thats something interessting, but I didnt yet include the setInitialValue part. However it seems to work anyways :/

[smnbbrv]

@andreElrico thanks for the solution.

Here is mine with a component instead of directive:

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

@Component({
  selector: 'app-select-search',
  template: `
    <ngx-mat-select-search
      [formControl]="ctrl"
      [placeholderLabel]="'mat-select-search:placeholder/label' | translate"
      [noEntriesFoundLabel]="'mat-select-search:not-found/label' | translate">
      <fa-icon ngxMatSelectSearchClear [icon]="clearSearchIcon"></fa-icon>
    </ngx-mat-select-search>
  `,
})
export class SelectSearchComponent<T extends Searchable> implements OnInit {

  @Input() searchPool: T[];

  clearSearchIcon = faTimes;

  ctrl = new FormControl();

  options: Observable<T[]>;

  constructor(private matOption: MatOption) { }

  ngOnInit(): void {
    this.matOption.disabled = true; // otherwise ExpressionHasBeenChanged error

    this.options = this.ctrl.valueChanges.pipe(
      startWith(''),
      map(value => {
        if (!value) {
          return this.searchPool;
        }

        const searchTerm = value.toLowerCase();

        return this.searchPool.filter(item => item.name.toLowerCase().includes(searchTerm));
      }),
    );
  }

}

and it's easy to use just like

<mat-option>
  <app-select-search [searchPool]="views" #search></app-select-search>
</mat-option>

However I don't anyhow feel this solution can be generalized. The way to search and other parameters such as i18n params are quite subjective.

Probably this issue should be resolved as an example-like / documentation solution.