Add interpolation and ternary in angular 4 html componant

Question

I'm trying to do a weird thing I guess since angular is complaining. Has anyone tried to mix interpolation and ternary in html code on Angular 4

On an input I'm trying to inject a matToolTip using ternary while using pipe to translate the string to show, like so:

<input
                typeaheadOptionField="name"
                typeaheadOptionsLimit="15"
                placeholder="{{ 'odal.selectPlaceholder' | translate }}"
                class="form-font-size form-control"
                style="vertical-align: middle"
                type='text'
                [matTooltip]="!isRefAutorized ? {{ 'modal.refSelect' | translate }} : null"
                (keyup.enter)="createStyle(styleCode.value)"
                #styleCode
            />

But angular complaining with

Parser Error: Got interpolation ({{}}) where expression was expected at column 18 in [!isRefAutorized ? {{ 'modal.selectPlaceholder' | translate }} : null]

it works fine when I do just:

 [matTooltip]="!isRefAutorized ? 'not authorized' : null"

Interpolation is required for non-angular html attributes to evaluate the expression. Can you try without the interpolation. — Rohit Ramname
– Rohit Ramname, Commented Dec 18, 2017 at 15:01
@RRForUI I tried but then I've got a different error since it does not evaluate the translate and consider it part of the ternary — kyserslick
– kyserslick, Commented Dec 18, 2017 at 15:06

Bunyamin Coskuner · Accepted Answer · 2017-12-18 15:12:09Z

6

You cannot do that.

Instead, you should change your code as following

[matTooltip]="!isRefAutorized ? ( 'modal.refSelect' | translate ) : null"

answered Dec 18, 2017 at 15:12

Bunyamin Coskuner

8,8792 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kyserslick Over a year ago

marche nickel, merci

Collectives™ on Stack Overflow

Add interpolation and ternary in angular 4 html componant

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related