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?".
Top comments (0)