Is it possible to apply a conditional pipe which itself contains a condition?

Question

I have a dropdown (input + autocomplete) where I can type a string or select an object from the dropdown list. I want to use the pipe only when the value in the input is of type string. If user selects a value from dropdown, I need to remove the custom pipe.

I want to apply the custom pipe the typeof option.name is String. and to remove it if type is Object.

Tried the link, but in vain Angular 2 Pipe under condition

Actual code:

<mat-option *ngFor="let option of sortedOptions"
       [innerHTML]="option?.name | highlight : userControl.value" >

What I am not able to understand is how to check String type here:

{{ typeof(option.name) ? (option?.name | highlight : userControl.value)  : option.name }}

asimhashmi · Accepted Answer · 2019-06-13T13:27:47.453

1

You can create helper method on your component like this:

isString(val) { return typeof val === 'string'; }

Now you can check your condition like this:

{{ isString(option.name) ? (option?.name | highlight : userControl.value)  : option.name }}

Here is the working demo for you

edited Jun 13 '19 at 13:27

answered Jun 13 '19 at 11:39

asimhashmi

4,258
1
14
34

Thank you for showing the way. but Its not highlighting when the type is String. – Haze Jun 13 '19 at 13:03
@MissKomal I updated my answer and added a stackblitz demo, see it in action there – asimhashmi Jun 13 '19 at 13:28

Is it possible to apply a conditional pipe which itself contains a condition?

1 Answers1