Day 8 - Attribute Binding in Vue 3, Svelte 5 and Angular

#webdev #angular #vue #svelte

Disable the Save Item Button Conditionally
Resources
Github Repos
Gitbub Pages

On Day 8, I will demonstrate an example of attribute binding in Vue 3, SvelteKit, and Angular. In the example, the Save Item button is disabled unless the input length is at least 5.

Disable the Save Item Button Conditionally

Vue 3 application

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'

const newItem = ref('')
const isEditing = ref('false')

const saveItem = () => { … same logic as before … }
</script>

<template>
  <form v-if="isEditing" @submit.prevent="saveItem">
    <input v-model.trim="newItem" placeholder="Add new item" />
    <button :disabled="newItem.length < 5" aria-label="Save Item">
      <Icon icon="ic:outline-save" />
    </button>
  </form>
</template>

From Vue 3.4+, the format of element attribute binding is :<attribute name>=<value>.

In the demo, we want to bind the disabled attribute of the Save Item button so that it is disabled when the length of newItem ref is less than five.
:disabled="newItem.length < 5" disables the button when the input length is less than five. Otherwise, the button is enabled and can be clicked to append item.

SvelteKit application

<script lang="ts">
    import Icon from '@iconify/svelte';
    let newItem = $state('');
     let isEditing = $state(false);

     function saveItem() { … same logic as before … }
</script>

{#if isEditing}
    <form method="POST" onsubmit={handleSubmit}>
        <input id="newItem" name="newItem" type="text" placeholder="Add item" bind:value={newItem} />
        <button disabled={newItem.length < 5} aria-label="Save Item">
            <Icon icon="ic:outline-save" />
        </button>
    </form>
{/if}

In Svelte 5, element attribute is binded the same way as vanilla JavaScript. An element attribute can be binded like this: <attribute name>=<value>.

In the demo, we want to bind the disabled attribute of the Save Item button so that it is disabled when the length of newItem rune is less than five.
disabled={newItem.length < 5} disables the button when the input length is less than five. Otherwise, the button is enabled and can be clicked to append item.

Angular 19 application

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { matSave } from '@ng-icons/material-icons/baseline';

@Component({
  selector: 'app-shopping-cart',
  imports: [FormsModule, NgIcon],
  viewProviders: [provideIcons({ matSave })],
  template: `
     @if (isEditing()) {
      <form (ngSubmit)="saveItem()">
        <input type="text" placeholder="Add new item" name="newItem" [(ngModel)]="newItem" />
        <button type="submit" [disabled]="newItem().length < 5" aria-label="Save Item">
          <ng-icon name="matSave"></ng-icon>
        </button>
      </form>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  newItem = signal('');
  isEditing = signal(false);

  saveItem() { … same logic as before … }
}

In Angular, box syntax is used to bind element attribute. An element attribute can be binded like this: [attribute name]=<value>.

In the demo, we want to bind the disabled attribute of the Save Item button so that it is disabled when the length of newItem ref is less than five.
[disabled]="newItem.length < 5" disables the button when the input length is less than five. Otherwise, the button is enabled and can be clicked to append item.