CODEWITHSUNDEEP
angular
kyserslick
kyserslick

Reputation: 591

Add interpolation and ternary in angular 4 html componant

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"

Upvotes: 3

Views: 1853

Answers (1)

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

You cannot do that.

Instead, you should change your code as following

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

Upvotes: 6

Related Questions