How to interpolate a variable in a .html element?

Hi I have a question, I am very confused about this subject and if I am completely barking up the wrong tree then please let me know.

So I have a carousel component with a number of cards in it, I want to be able to display some text in each card based on data that is stored in a global variable.

As I understand it the correct way to populate a card is to use the .html function e.g.

Code:

{                        html: 'Content 2'
                        style: 'background:#333'
              }

What I am trying to do is produce a piece of code that will be rendered in that .html section to display the contents of a variable , the variable in this case is contained here and is valid

Code:

AccessAber.app.getSelectedRoute().route_name_en

I assumed that I would be able to use {} or [] brackets to access this value inside the HTML but it either does not run, or gives me an error saying the variable is null at compile time, which is true as the variable is not set until run time and as such I would not expect this .html element to be rendered until the user reaches that screen in the hierarchy.

This is the approach that I would assume would work but it does not, it gives the error about the variable being null, which as mentioned above it should be at this point until the view is rendered.

Code:

"<h2>routename: " + AccessAber.app.getSelectedRoute().route_name_en + "</h2>"

Am I missing something simple here? This seems like it should be incredibly trivial...

Thanks

Jonathan