Angular: map strings from the component to the template

Question

Lets say I have a service that returns a list ob objects.

[
  {item: 'box', price: 10, state: 'N'},
  {item: 'toy', price: 15, state: 'U'},
  {item: 'ink', price: 20: state: 'O'}
]

In the webapp I like to map the state to readable text. I would put a map in my component and use it in the template.

Component

map = new Map ([
 [ "N", "new in stock" ],
 [ "U", "used but ok" ],
 [ "O", "out of stock" ]
]);

Template

<tr *ngFor="let d of data">
    <td>{{ d.item }}</td>
    <td>{{ map.get (d.state) }}</td>
</tr>

I am not sure thats the best strategy to do that. It is simple and easy but I would favor a way that is more related to the template (the view) instead of the component (the control).

I can think of a pipe that translates but maybe thats a overkill for that simple problem.

Thanks for suggestions and comments.

Answer 1

You can create a simple object like this:

TS:

  map = {
    N: "new in stock",
    U: "used but ok",
    O: "out of stock"
  }

HTML:

<tr *ngFor="let d of data">
    <td>{{ d.item }}</td>
    <td>{{ map[d.state] }}</td>
</tr>

or create a simple function with a switch case that would return the full text.

Try like this:

HTML:

<tr *ngFor="let d of data">
    <td>{{ d.item }}</td>
    <td>{{ getFullText(d.state) }}</td>
</tr>

TS:

  getFullText(abb:string) {
    switch(abb) {
      case "N":
      return "new in stock";

      case "U":
      return "used but ok";

      case "O":
      return "out of stock";
    }
  }