DEV Community

Connie Leung
Connie Leung

Posted on

Day 13 - Create a CoffeePlan Component with Prop

#tutorial #svelte #vue #angular

Table of Contents

Create a CoffeePlan Component

On day 13, I started refactoring the HTML code into a reusable CoffeePlan component. The component will accept a name input and display the input value in the HTML template.

Starter HTML Code 

<div class="content">
  <h1 class="title">Coffee Plans</h1>

  <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

  <div class="plans">
    <div class="plan">
      <div class="description">
        <span class="title"> The Single </span>
      </div>
    </div>

    <div class="plan">
      <div class="description">
        <span class="title"> The Curious </span>
      </div>
    </div>

    <div class="plan">
      <div class="description">
        <span class="title"> The Addict </span>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The following HTML block repeats four times except they have a title title. Therefore, it can extract into a Coffee

<div class="plan">
  <div class="description">
    <span class="title"> The Single </span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Create the CoffeePlan Component without Props

Vue 3 application

  • Create a new components/CoffeePlan.vue file and update the template 
<script setup lang="ts"></script>

<template>
    <div class="plan">
      <div class="description">
        <span class="title"> The Single </span>
      </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Import CoffeePlan to App.vue 
<script setup lang="ts">
import CoffeePlan from './components/CoffeePlan.vue'
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        <CoffeePlan />
        <CoffeePlan />
        <CoffeePlan />
        <CoffeePlan />       
      </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode
  • At this moment, we will see four CoffeePlan components with the title 'The Single'. Later, we will refactor this component to accept different titles.

SvelteKit application

  • Create a new lib/coffee-plan.svelte file and update the template 
<script lang="ts"></script>

<div class="plan">
  <div class="description">
    <span class="title"> The Single </span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • export the new component from lib/index.ts 
export * from './coffee-plan.svelte';
Enter fullscreen mode Exit fullscreen mode
  • Import CoffeePlan to +page.svelte 
<script lang="ts">
import CoffeePlan from '$lib/coffee-plan.svelte';
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        <CoffeePlan />
        <CoffeePlan />
        <CoffeePlan />
        <CoffeePlan />       
      </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Angular 19 application

  • Create a new CoffeePlanComponent 
ng g c coffeePlan
Enter fullscreen mode Exit fullscreen mode 
@Component({
  selector: 'app-coffee-plan',
  imports: [],
  template: `
    <div class="plan">
        <div class="description">
            <span class="title"> The Single </span>
        </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CoffeePlanComponent {}
Enter fullscreen mode Exit fullscreen mode
  • Import CoffeePlanComponent to AppComponent in app.component.ts 
import { CoffeePlanComponent } from './coffee-plan/coffee-plan.component';

@Component({
  selector: 'app-root',
  imports: [CoffeePlanComponent],
  template: `
    <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        <app-coffee-plan />
        <app-coffee-plan />
        <app-coffee-plan />
        <app-coffee-plan />
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

Add Name Prop to the CoffeePlan Component

Vue 3 application

  • Define a name prop with a default value and proper type. defineProps is automatically imported, so we do not have to import it explicitly. 
<script setup lang="ts">
defineProps({
    name: {
        type: String,
        default: 'Default Plan',
    },
})
</script>

<template>
    <div class="plan">
      <div class="description">
        <span class="title"> {{ name }} </span>
      </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Pass Input Values to CoffeePlan Component 
<script setup lang="ts">
import CoffeePlan from './components/CoffeePlan.vue'
import { ref } from 'vue'

const plans = ref(["The Single", "The Curious", "The Addict", "The Hacker"])
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        <CoffeePlan v-for="plan in plans" :key="plan" :name="plan" />
      </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

SvelteKit application

  • Define a name prop with a default value and proper type. $props can be used without any import. 
<script lang="ts">
interface Props {
    name: string
}

const { name = 'Default Plan'} = $props();
</script>

<div class="plan">
  <div class="description">
    <span class="title">{name}</span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Pass Input Values to CoffeePlan Component 
<script lang="ts">
import CoffeePlan from '$lib/coffee-plan.svelte';

const plans = $state(['The Single', 'The Curious', 'The Addict', 'The Hacker']);
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        {#each plans as plan (plan)}
            <CoffeePlan plan={name} />
        {/each}  
      </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Angular 19 application

  • Define a name signal input in the CoffeePlanComponent. 
@Component({
  selector: 'app-coffee-plan',
  imports: [],
  template: `
    <div class="plan">
        <div class="description">
            <span class="title">{{ name() }}</span>
        </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CoffeePlanComponent {
    name = input('Default Plan');
}
Enter fullscreen mode Exit fullscreen mode
  • Pass Input Values to CoffeePlanComponent 
import { CoffeePlanComponent } from './coffee-plan/coffee-plan.component';

@Component({
  selector: 'app-root',
  imports: [CoffeePlanComponent],
  template: `
    <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        @for (plan of plans(); track plan) {
            <app-coffee-plan [name]="plan"  />
        }
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
    plans = signal(['The Single', 'The Curious', 'The Addict', 'The Hacker']);
}
Enter fullscreen mode Exit fullscreen mode

We have successfully created a reusable CoffeePlan component and imported it to App component to display different plans.

Github Repositories:

Top comments (0)