CODEWITHSUNDEEP
angularstring-interpolationngx-translate
Crocsx
Crocsx

Reputation: 7620

pass translated value based on a parameter in angular

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

Upvotes: 1

Views: 2894

Answers (2)

Mustahsan
Mustahsan

Reputation: 3862

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>

Upvotes: 1

Crocsx
Crocsx

Reputation: 7620

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>

Upvotes: 1

Related Questions