<- Go Back

Day 14 - Create a PlanPicker Parent Component

Connie Leung

Connie Leung

2025-08-02T10:35:05Z

3 min read

Table of Contents

On day 14, I continued refactoring the App Component by extracting the coffee plan list to a new PlanPicker component. Not only the App component is cleaner but also the PlanPicker component can be reused to create additional coffee plan lists.

App 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

The above is the existing App component and I will extract

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

to a new PlanPicker component.

Create the PlanPicker Component

Vue 3 application

  • Create a new components/PlanPicker.vue file and update the template. 
<script setup lang="ts">
import { ref } from 'vue'
import CoffeePlan from './CoffeePlan.vue'

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

<template>
    <div class="plans">
        <CoffeePlan v-for="plan in plans" :key="plan" :name="plan" />
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Import PlanPicker to App.vue 
<script setup lang="ts">
import PlanPicker from './components/PlanPicker.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>

      <PlanPicker />
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

SvelteKit application

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

<div class="plans">
    {#each plans as plan (plan)}
        <CoffeePlan name={plan} />
    {/each}
</div>
Enter fullscreen mode Exit fullscreen mode
  • export the new component from lib/index.ts 
export * from './plan-picker.svelte';
Enter fullscreen mode Exit fullscreen mode
  • Import PlanPicker to +page.svelte 
<script lang="ts">
import PlanPicker from '$lib/plan-picker.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>

      <PlanPicker />
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Angular 19 application

  • Create a new PlanPickerComponent 
ng g c PlanPicker
Enter fullscreen mode Exit fullscreen mode 
import { CoffeePlanComponent } from '../coffee-plan/coffee-plan.component';

@Component({
  selector: 'app-plan-picker',
  imports: [CoffeePlanComponent],
  template: `
    <div class="plans">
      @for (plan of plans(); track plan) {
        <app-coffee-plan [name]="plan" />
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlanPickerComponent {
  plans = signal(['The Single', 'The Curious', 'The Addict', 'The Hacker']);
}
Enter fullscreen mode Exit fullscreen mode
  • Import PlanPickerComponent to AppComponent in app.component.ts 
import { PlanPickerComponent } from './plan-picker/plan-picker.component';

@Component({
  selector: 'app-root',
  imports: [PlanPickerComponent],
  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>

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

We have successfully created a PlanPicker component that encapsulates the CoffeePlan component. The PlanPicker is the parent of the CoffeePlan and provides the props to the to the children.

Github Repositories: