How to concatenate two variables and assign to the label attributes of lightning-card in lightning web component

Question

I have a lightning-card in lightning web component (LWC) and want to set the label attribute with two different variables. Although this can be done through the controller but I want to do this in html file itself.

As in the code snippet, I am assigning {cardTitle} as a title, but I have another variable {totalCount} and want to concatenate the totalCount along with the cardTitle here. So lightning-card should have title like "{cardTitle}{totalCount}".

<lightning-card title={cardTitle}></lightning-card>

//In Controler js
@track cardTitle = 'Student details';
@track totalCount = 0; //This will be set by the apex controller later and will have dynamic number

When I try below code

<lightning-card title={cardTitle}{totalCount}></lightning-card>

It shows error as

multiple expressions found

.

Answer 1

No. You can only do it in controller JavaScript file.

I love part of the answer on SF stackexchange so I'm going to quote it here:

Your concerns about separating UI from controller logic do not apply here as this is not a "controller". That MVC pattern is an Aura-ism. This is the code which drives your component's functionality so it makes sense that your JS would know about class names.

It's different but think about it that way - it'll let you write a proper unit test for the JavaScript. How you'd test logic that exists only in HTML layer? Or only in Visualforce page markup?

You can have only one expression. If you read documentation like https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_directives

you'll see

The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person2.name['John']). To compute the value of expression, use a getter in the JavaScript class.