Angular 20 will support tagged template literals in components and templates.

The feature is in 20.0.0-next.1; therefore, it can be tested after updating the Angular dependencies to the next version.

ng update @angular/cli --next
ng update @angular/core --next
for="greeting">Greeting: 
       @let options = ['morning', 'afternoon', 'day', 'evening', 'to see you', 'day to you'];
        [(ngModel)]="greeting" id="greeting" name="greeting">
         @for (option of options; track option) {
            [ngValue]="option">{{ option }}
         }
       
   
   {{ greet`Hello ${name()}, Good ${greeting()}!` }}
   {{ greet`Wait up, ${name()}. How do say ${greeting()} in Spanish?` }}

The template has a drop-down bound to the greeting signal, and the name signal is initialized to “Mary”. The tag allows the greet method to parse the template literals/strings in the expression.

export class AppComponent {
 name = signal('Mary');
 greeting = signal('morning');

 greet(strings: TemplateStringsArray, name: string, greeting: string) {
   console.log(strings);
   return `${strings[0]} ${name}${strings[1]} ${greeting}${strings[2]}`;
 }
}

The strings array contains three strings.

For the first expression, strings contains ["Hello", ", Good ", "!"]. For the second expression, strings contains ["Wait up", ", . How do you say ", " in Spanish?"].

The greet function returns "Hello Mary, Good morning!" and "Wait up, Mary. How do you say morning in Spanisn?".

References: