EmojisToShowFilter --- ERROR: TypeError: Function Expected

[mlembke1]

When using emojisToShowFilter property on the emoji-mart component, no emojis are showing up and I am receiving in my console the message: ERROR TypeError: Function Expected.

Some variations that I have tried are:

emojisToShowFilter="((emoji) => true)"
(emojisToShowFilter)="((emoji) => true)"
[emojisToShowFilter]="((emoji) => true)"
emojisToShowFilter="(emoji) => true"
emojisToShowFilter="customMethod(emoji)"
emojisToShowFilter="(emoji) => customMethod(emoji)"
emojisToShowFilter="function(emoji){ return true }"

None of these are working and I just get the same error every-time. Can someone tell me what I am doing wrong? I don't see that anyone else is having this issue...

[scttcper]

probably related to #172

[mlembke1]

Hi @scttcper , Thanks so much for the quick response. Love the repo btw! Brilliant.

I did take a look at that issue before, albeit I am not articulating an issue with the search, although that is an issue.

Are you insinuating that the error I am receiving is actually from the search service and not so much having to do with me improperly calling emojisToShowFilter?

Thanks again,
Mitch

[s-moran]

@mlembke1

I would recommend against passing an "inline" function, i.e., a function defined in your template. Just define your filter function in your component's ts file and then do something like:

[emojisToShowFilter]="myDefinedFn"

I provided an example of such a function in #275.

[mlembke1]

@s-moran Thanks for the response. The issue I find with your example - having a function that is defined in the .ts file - is that in your example, nothing is being passed to the function. The documentation says ((emoji) => true). Meaning of course that myDefinedFn would have to be myDefinedFn(emoji). The problem with that is emoji is undefined in the template unless I do something like this;
[emojisToShowFilter]="(emoji) => myDefinedFn(emoji)"
Unfortunately, the result I get when trying to build is:

: Parser Error: Unexpected token '=' at column 9 in [(emoji) => myDefinedFn(emoji)] in C:/Users/mitch/socsocial/SocSocial/app/src/app/components/emoji-dialog/emoji-dialog.component.html@8:2 ("
  exclude="[flags]"
  showSingleCategory="true"
  [ERROR ->][emojisToShowFilter]="(emoji) => myDefinedFn(emoji)"
  >
</emoji-mart>
")

Any suggestions ? Thanks so much for your activity on this.

[s-moran]

The documentation is just giving you the signature of the function that is expected. In other words, you have to define a function in the .ts file that takes a string as input and returns a boolean.

In the template, all you have to do is pass in the name of the function you created. When the search actually runs, your function will be called in the background many times with different string inputs. Think of your function in the same way as any other variable (boolean, string, number) that you would normally pass in a template.

[mlembke1]

@s-moran Okay, so... [emojisToShowFilter]="myFunc"
and In my .ts....

myFunc = (stringInput) => { 
  if (*my logic using string input*) { return true }  
  return false

I saw that you made a PR and a change recently. Will that change effect those of us who aren't using Angular 8?

[mlembke1]

I am going to close this issue. @s-moran, your advice helped, thanks.
However, I would like to make an appeal that the documentation be updated as it is severely misleading concerning the [emojisToShowFilter] property. Thanks for your support.