Tagged Template Literals on Template

#angular #webdev #tutorial

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

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

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