Search code examples
angulartypescriptionic3angular-directivengx-translate

How to pass translation string in angular 5 directive as an attribute value?

I have created one simple angular directive for Read More. To use that directive I have written following code

<p [readMore]="profile?.profileSummary" [length]="100" 
   [showMoreText]="{{ 'SHOW_MORE' | translate }}" 
   [showLessText]="{{ 'SHOW_LESS' | translate }}">
{{profile?.profileSummary}}</p>

But this template is not getting parsed, as I am passing translation Key, as an attribute value but its working fine when I am passing the only string to it.

How can I pass translation key to the attribute value in the Angular directive?

Solution

  • You do it with property binding:

     [showMoreText]="'SHOW_MORE' | translate "

    or using interpolation:

     showMoreText="{{ 'SHOW_MORE' | translate }}"

    read the detail here in the official doc about property binding or interpolation