Tagged Template Literals on Template

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 Greeting: @let options = ['morning', 'afternoon', 'day', 'evening', 'to see you', 'day to you']; @for (option of options; track 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: PR: https://github.com/angular/angular/pull/59947 Github Repo: https://github.com/railsstudent/angular20-new-features/blob/main/projects/tagged-template-literals-demo/src/app/app.component.ts Github Page: https://railsstudent.github.io/angular20-new-features/tagged-template-literals-demo/

Mar 15, 2025 - 18:50

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?".