Day 3 - Use Expression in Template

#webdev #angular #svelte #vue

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.

Github Repos:

Github Pages:

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started