0

I'm trying to work out how to handle a particular situation where a variable that is bound to a template, itself has variable values controlled by a different parameter to the parent variable. Here's an example of what I mean:

Template:

<spell>
    <em>Description: </em> {{ description }}
</spell>

Example Descriptions:

This spell deals {{ val1 }} damage and heals for {{ val2 }} health.
This spell grants {{ val1 }} additional armor.

Variable values:

[[30, 40, 50, 60, 70], [10, 20, 30, 40, 50]]
[[10, 20, 30, 40, 50]]

The description is determined by the ID of the spell being requested and the values in that description depend on the level of that spell.

From my searching around, I thought may the answer to this question was what I was looking for but that appears to need components for each dynamically used template. Is this really the right solution for what I'm doing or am I missing an alternative?

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Community
  • 1
  • 1
Acaeris
  • 175
  • 2
  • 11

1 Answers1

0

Create functions for all descriptions, have a login/map to find out what function to run, run the function with args and already use the result to bind in Angular. 

let fn = (val1, val2) =>
  `This spell deals ${val1} damage and heals for ${val2} health.`;
let result = fn(5, 6);
Julia Passynkova
  • 17,256
  • 6
  • 33
  • 32
  • Unfortunately, the descriptions are as is. They are loaded in by a file that contains 1000s of entries (~600 actual spells but there are multiple versions of each spell that needs to be accounted for), so changing the format or creating functions for them all isn't really possible. That's part of why I was hoping there was a way to do it without Angular needing to be fully aware of what's going on. Looks like I will need to do some string replace work. Thankfully, there are a limited number of variable slots and they are always labelled "val1" -> "val10". – Acaeris Apr 18 '17 at 11:17
  • Yes, you have to handle these strings separately from Angular.You can load the file and create these description functionals dynamically. – Julia Passynkova Apr 18 '17 at 11:25