Binding 'this' in Angular Material Autocomplete displayWith using Angular 5

Question

I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like

displayFn(id) {
 return this.getValue(id)
}
getValue(id) {
 /**return some string
}

For the autocomplete

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of outletFilterOptions | async [value]="option.outletId">
   {{ option.outletName }}
  </mat-option>
</mat-autocomplete>

As you see I am using the id as the model instead of the entire object.

When the display function returned an error that this.getValue is undefined I searched Stack Overflow for a solution and was suggested that I use something like [displayWith]="displayFn.bind(this)".

But unfortunately, that isn't working for me either. I am using Angular material 5.1.0.

Is there something I am missing?

score 32 · Accepted Answer · answered Apr 23 '19 at 18:41

32

displayFn = value => {
  // now you have access to 'this' 
  this.someMethod();
  return 'formatted display';
}

answered Apr 23 '19 at 18:41

IonutAnin

335
3
5

It was not obvious to me why this works. I learned that arrow functions differ in that they always establish "this" based on the scope where they are defined. – Steve Jun 29 '21 at 16:14
that saved me Thanks! – WorldOfEmre Aug 04 '21 at 15:51

score 7 · Answer 2 · answered Jan 31 '20 at 14:57

It is because of this is not binding to the component and its binding to mat-select option

NOw for using component's function, you have to use arrow function, the preferable method or pass this from the HTML function

I will use the arrow function to use the component's function

Without arrow function

displayFn(data: any) {
    return data.Id?this.sometask(data):''
}

With arrow function

displayFn = (data: any) => {
    return data.Id?this.sometask(data):''
}

This work in my scenario and it worked in your scenario too.

hnzlmnn · Answer 3 · 2018-04-20T10:37:47.113

4

You could just change your template to be

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn(id, this)">

Inside of templates this is a reference to your Component. Then just change your function to

displayFn(id, _this) {
  return _this.getValue(id)
}

If [displayWith] needs to be a function, you could create a property that returns your displayFn like this:

get createDisplayFn() {
  return (id) => {
    return this.getValue(id)
  }
}

and change your binding to [displayWith]="createDisplayFn". As ES6 arrow function can't be rebinded, this should still be a reference to your component.

edited Apr 20 '18 at 10:37

answered Apr 20 '18 at 10:30

hnzlmnn

393
2
14

I tried your first suggestion but I can't happen to pass the selected `id` with the displayFn. The second suggestion sets my display value with the function itself like `function { return this.... ` is printed in the DOM – Sriram Jayaraman Apr 20 '18 at 10:41
1

The second option here (using a proxy function to return your function) worked for me. – Josh Aug 15 '18 at 02:15
@SriramJayaraman I guess, you forgot the `get` before the function definition – TmTron Dec 27 '18 at 18:24

bugs · Answer 4 · 2018-04-20T10:28:11.073

0

Define cThis = this as a property of your class, and then use it inside your displayFn function:

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn(id, cThis)">

cThis = this;
displayFn(id, cThis) {
 return cThis.getValue(id)
}
getValue(id) {
 /**return some string
}

Demo that shows binding in displayWith

edited Apr 20 '18 at 10:28

answered Apr 20 '18 at 10:22

bugs

14,631
5
48
52

I checked out your suggestion but I am not able to pass the id from the DOM – Sriram Jayaraman Apr 20 '18 at 10:42
Where is `id` coming from then? – bugs Apr 20 '18 at 10:42
The id is auto-generated by angular material without passing any such paramters – Sriram Jayaraman Apr 20 '18 at 11:06
OK I see, what happens if you just do `[displayWith]="displayFn(cThis)"` ? – bugs Apr 20 '18 at 11:08
yes i get one param and that is is this binded to it – Sriram Jayaraman Apr 20 '18 at 11:10
But then I assume `id` is undefined? If that's the case, could you not extract id from the `option` object? – bugs Apr 20 '18 at 11:13
yes! in that case id is undefined. `option` object is only the list, it is not the selected option – Sriram Jayaraman Apr 20 '18 at 13:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169445/discussion-between-bugs-and-sriram-jayaraman). – bugs Apr 20 '18 at 13:19

score 0 · Answer 5 · answered Jun 04 '18 at 08:48

0

You just missed an undefined check before using attribute.

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="optionSelected($event)">

<mat-option *ngFor="let user of users" [value]="user" >
    {{ user.first_name }} {{ user.last_name }}
</mat-option>

displayFn(user) {
    if (!user) return '';
    return user.name;
}

answered Jun 04 '18 at 08:48

Sajin M Aboobakkar

4,051
4
30
39

I wanted to call another method within the displayFn method. – Sriram Jayaraman Jun 11 '18 at 06:28

Binding 'this' in Angular Material Autocomplete displayWith using Angular 5

5 Answers5

Linked