Day 2 – Create a ShoppingCart component

by
Reading Time: < 1 minute

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.




   
Shopping Cart

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

Updated the codes in App.vue that failed to compile

// App.vue

import ShoppingCart from './components/ShoppingCart.vue'
  • SvelteKit application

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

// shopping-cart.svelte





Shopping Cart

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

   import ShoppingCart from '$lib/shopping-cart.svelte';
  • 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: `
   
Shopping Cart

 `,
 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: '',
 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:

Post Views: 74