Day 2 - Create the ShoppingCart component

[Lomanu4]

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

    Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

    
    
  • 
    

    Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

    
    
  • 
    

    Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

    
    

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.