Day 2 – Create a ShoppingCart component

by
Reading Time: < 1 minute

Loading

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>

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>
  • SvelteKit application

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

// shopping-cart.svelte

<script lang="ts">
</script>


<p>Shopping Cart</p>

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

// index.ts
export * from './shopping-cart.svelte';

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 />
  • 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

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

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

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

Resources

Github Repos:

Github Pages: