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:

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay