@angular/localize: How to use interpolation in templates?

Question

I'm using @angular/localize to translate labels in my application.

Say this is my translation file:

{
    "locale": "en-US",
    "translations": {
        "WELCOME_MESSAGE": "Hi {$NAME}! Welcome to {$APP_NAME}!!"
    }
}

When translating in typescript, I can do something like this:

name = 'John';
appName = 'My App';
const msg = $localize`:@@WELCOME_MESSAGE:${name}:NAME:${this.appName}:APP_NAME:`
// msg = "Hi John! Welcome to My App!!"

But I cannot find a way to to this in templates.

This doesn't work:

<p i18n="@@WELCOME_MESSAGE:{{input.value}}:NAME:{{this.appName}}:APP_NAME">
  ...
</p>