DEV Community

Connie Leung
Connie Leung

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

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]}`;
 }
}
Enter fullscreen mode Exit fullscreen mode

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:

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay