Posted on Aug 2 • Edited on Aug 16

Day 14 - Create a PlanPicker Parent Component

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>

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>

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>

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>

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>

export the new component from lib/index.ts

export * from './plan-picker.svelte';

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>

Angular 19 application

Create a new PlanPickerComponent

ng g c PlanPicker

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']); }

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 {}

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.