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

Answer 1

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>