Inject a translated string as an input in an angular 5 component

Question

I have an angular component template I want to inject title as an @Input() into, to be displayed as:

  <div class="title" >
    {{ title }}
  </div>

How do I inject the translated title into the parent component using ng2-translate's pipe, like so:

<title-component
    [title]="{{ 'KEY' | translate }}"
></title-component>

I want to pass the translated string dynamically to the child component, but I'd prefer to avoid injecting the translate service into the component's constructor and keep everything in the template, if possible. Thanks

Answer 1

{{}} are not required in inputs, so removing those should solve your issue