DEV Community

Connie Leung
Connie Leung

Posted on • Originally published at blueskyconnie.com

Day 2 - Create the ShoppingCart component

#webdev #angular #svelte #vue

On day 2, I will delete the boilerplate codes and create the ShoppingCart component.

Create the shopping cart component

  • Vue 3 application

Deleted all the files from the components/ folder.
Create ShoppingCart.vue in the component/ folder.

<script setup lang="ts"> </script>  <template> <p>Shopping Cart</p> </template>  <style scoped> </style>
Enter fullscreen mode Exit fullscreen mode

The template has a paragraph element that displays "Shopping Cart".

Updated the codes in App.vue that failed to compile

// App.vue <script setup lang="ts"> import ShoppingCart from './components/ShoppingCart.vue' </script>  <template> <ShoppingCart /> </template>
Enter fullscreen mode Exit fullscreen mode
  • SvelteKit application

Create shopping-cart.svelte in the lib/ folder.

// shopping-cart.svelte <script lang="ts"> </script>  <p>Shopping Cart</p>
Enter fullscreen mode Exit fullscreen mode

The template has a paragraph element that displays “Shopping Cart”.

// index.ts export * from './shopping-cart.svelte';
Enter fullscreen mode Exit fullscreen mode

Export shopping-cart.svelte from index.ts.

Updated the codes in +page.svelte to include the ShoppingCart component

// +page.svelte <script lang="ts"> import ShoppingCart from '$lib/shopping-cart.svelte'; </script>  <ShoppingCart />
Enter fullscreen mode Exit fullscreen mode
  • Angular 19 application

Use Angular CLI to generate the ShoppingCartComponent. The schematic will create shopping-cart.component.html, shopping-cart.component.ts, shopping-cart.component.scss and shopping-cart.component.spect.ts

ng g c shopping-cart/shoppingCart --flat
Enter fullscreen mode Exit fullscreen mode

I will use an inline template for the component. Let's delete shopping-cart.component.html, shopping-cart.component.scss, and shopping-cart.component.spect.ts.

import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-shopping-cart', imports: [], template: ` <p>Shopping Cart</p> `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ShoppingCartComponent {}
Enter fullscreen mode Exit fullscreen mode

The inline template has a paragraph element that displays "Shopping Cart".

Added the ShoppingCartComponent to the imports array of AppComponent.

// app.component.ts import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; @Component({ selector: 'app-root', imports: [ShoppingCartComponent], template: '<app-shopping-cart />', changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

We have successfully created the shopping cart component and displayed it in the application.

Resources

Top comments (0)