Posted on May 19 • Edited on Jun 28 • Originally published at blueskyconnie.com

Day 3 - Use Expression in Template

On day 3, I will interpolate the header expression in the template.

Interpolate the header expression in the template

Vue 3 application

In the script tag of the ShoppingCart component, I will create a header ref with an initial value. Then, the template uses the mustache syntax {{ expression }} to evaluate the ref and display its value.

<script setup lang="ts"> import { ref } from 'vue' const header = ref('Shopping List App - Vue 3') </script>  <template> <h1>{{ header }}</h1> </template>

In the script tag, I imported ref from vue and created a header ref. The template uses the mustache syntax to evaluate the ref and display the value.

SvelteKit application

Svelte 5 uses runes to create reactive states. I used $state to create a header state, and the template uses single curly braces to evaluate the rune and display the value.

<script lang="ts"> let header = $state('Shopping List App - Svelte 5'); </script>  <h1>{header}</h1>

Angular 19 application

Angular stores reactive states in signals. I will create a header signal with an initial value in the ShoppingCartComponent class. Then, the template uses the mustache syntax {{ expression }} to evaluate the header's getter function and display its value.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; @Component({ selector: 'app-shopping-cart', imports: [], template: ` <h1>{{ header() }}</h1> `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ShoppingCartComponent { header = signal('Shopping List App - Angular'); }

In the ShoppingCartComponent class, I imported signal from @angular/core and created a header signal. The template uses the mustache syntax to evaluate the getter function of header and display the value.
The component displays "Shopping List App - Angular" within the h1 element.

We have successfully updated the shopping cart component to display the header in the template.