Day 2 - Create the ShoppingCart component
#webdev#angular#svelte#vue
Connie Leung

Connie Leung @railsstudent

About: Google Developer Expert for Angular 🅰️ 🇭🇰| 🅰Angular Architecture| 🅽NestJS| 🆅VueJs | 🆂 Svelte | 🆃TypeScript| Blogger| YouTube Content Creator| Software Architect at Diginex

Location:
Hong Kong
Joined:
Dec 15, 2021

Day 2 - Create the ShoppingCart component

Publish Date: May 18
0 0

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

Comments 0 total

    Add comment