Day 16 - Select a Coffee Plan with Component Event This article explains how to select a coffee plan using a component event to notify the parent component and enable or disable the border of an active plan in different frameworks
General Concept When a user selects a coffee plan, the CoffeePlan component emits a selectedPlan event with the plan name, and the PlanPicker component updates the active state and passes it as a selected property to each CoffeePlan so that only the selected one shows the active-plan CSS class
Vue 3 In Vue 3, a custom event is defined with defineEmits that emits selectedPlan with the plan name. The selectPlan method calls emit selectedPlan planName. Additionally, the selected prop is added with defineProps of type Boolean and default false. In the template, the dynamic active-plan class is bound to the selected value to show or hide the border
SvelteKit In SvelteKit, the CoffeePlan component extracts the selectedPlan function from $props and invokes it in handleSelectPlan passing name. It also extracts the selected flag from $props to conditionally apply the active-plan class in the class list of the container element
Angular 19 In Angular 19, the CoffeePlan component declares an Output selectedPlan that emits string and an Input selected initialized to false. The selectPlan method emits the value of the Input name to the parent. In the template, [class] or the class binding syntax is used to apply the active-plan class when selected is true
Component Communication The pattern is consistent across frameworks: the child notifies the parent with an event or callback, the parent maintains which plan is active and distributes that information to all children via a prop or Input called selected. This way, the border appears on the active plan and disappears on the others without duplicated logic
Best Practices Keep state control responsibility in the parent component PlanPicker Avoid duplicated states in children Use clear event names like selectedPlan and props like selected for readability Reuse CSS styles like active-plan and document the component API
About Q2BSTUDIO Q2BSTUDIO is a software development company specialized in custom applications and custom software. We offer complete solutions that include artificial intelligence and AI for businesses, AI agents, cybersecurity, aws and azure cloud services, and business intelligence services. We develop custom applications integrating artificial intelligence models to automate processes and improve decision-making with Power BI and other business intelligence tools. Our cybersecurity offering ensures secure implementations and regulatory compliance. If you are looking for custom software, custom applications, artificial intelligence, AI agents, aws and azure cloud services, or power bi for visualization and analysis, Q2BSTUDIO can design and implement the right solution
Workflow Example 1 The user clicks a CoffeePlan 2 CoffeePlan executes selectPlan and emits selectedPlan with the name 3 PlanPicker receives the event and updates the activePlan state 4 PlanPicker calculates the selected prop for each CoffeePlan based on activePlan 5 The CoffeePlan components render the active-plan class according to selected and the border appears only on the selected one
Conclusions Adding a component event and a selected prop allows clear and efficient communication between CoffeePlan and PlanPicker. This pattern facilitates reactive interfaces and keeps state logic in a single place. For companies that need custom applications and custom software, integrating this type of design with artificial intelligence solutions, AI agents, business intelligence services, and aws and azure cloud services offers scalability and security
Official Resources Vue Component Event https://vuejs.org/guide/components/events.html Svelte Component Event migration https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events Angular output https://angular.dev/guide/components/outputs
Example Repositories Vue 3 https://github.com/railsstudent/intro-vue3-components Svelte 5 https://github.com/railsstudent/intro-svelte-components Angular 19 https://github.com/railsstudent/intro-angular-components
Applied Keywords custom applications custom software artificial intelligence cybersecurity aws and azure cloud services business intelligence services ai for businesses AI agents power bi These keywords are integrated into Q2BSTUDIO's service description to improve web positioning and connect with clients looking for professional solutions in development, artificial intelligence, and cybersecurity
