pass translated value based on a parameter in angular

Question

I have the following translations

  "SIGNAL":{
    "0": "Initial state, unset state",
    "1": "Emergency",
    "2": "Dangerous state",
    "3": "Attention status, processing in progress",
    "4": "Attention",
    "5": "Normal status processing in progress",
    "6": "Normal status"
  },

each number is a error code from the server.

I have a component that display the error

export class DroneSignalLedComponent implements OnInit {
  @Input() signal: number;
  @Input() status: string;
  constructor() { }

  ngOnInit() {
  }

}

I would like to pass the translation to this component in the status input.

Here is the binding

<app-drone-signal-led [signal]="uav?.signal || 0" [status]="{{ 'DRONE.STATUS.SIGNAL.'+uav?.signal | translate }}"></app-drone-signal-led>

The problem is, I can't find a porper way to concat my value inside the binding. (because there is also the {{}} of the translation)

right now I have

compiler.js:2430 Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{ 'DRONE.STATUS.SIGNAL.'+uav?.signal | translate }}]

uav?.signal is a number that is from 0 to 6.

the result I would like, is that the optaining something like this

score 2 · Accepted Answer · answered Sep 03 '19 at 02:43

2

Check

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

  <app-drone-signal-led 
    [signal]="uav?.signal || 0" 
    [status]="('DRONE.STATUS.SIGNAL.'+(uav?.signal || 0)) | translate">
  </app-drone-signal-led>

answered Sep 03 '19 at 02:43

Crocsx

2,534
1
28
50

it compiles, but now I got another issue, the translate do not work, I just see ```DRONE.STATUS.SIGNAL.0``` – Bobby Sep 03 '19 at 02:46

score 1 · Answer 2 · answered Sep 03 '19 at 05:17

In continuation to Crocsx's Answer:

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

As in your signal object the keys are only 0 1 2 & 3 so you cannot append 'DRONE.STATUS.SIGNAL.' with these for translate to work, you only need to pass these digits to translate pipe separately like:

<app-drone-signal-led 
    [signal]="uav?.signal || 0" 
    [status]="'DRONE.STATUS.SIGNAL.'+((uav?.signal || 0) | translate) ">
</app-drone-signal-led>

yes, I wasn't showing the full path of the translation, so it was working with DRONE.STATUS.SIGNAL, thanks for the reply — Bobby, Sep 03 '19 at 05:43

pass translated value based on a parameter in angular

2 Answers2