Table of Contents
- App Component
- Create the PlanPicker Component
- Github Repositories
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.vuefile 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
PlanPickertoApp.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.sveltefile 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
PlanPickerto+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
PlanPickerComponenttoAppComponentinapp.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.