├── .editorconfig
├── .gitignore
├── .vscode
    ├── extensions.json
    ├── launch.json
    └── tasks.json
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── public
    └── favicon.ico
├── src
    ├── app
    │   ├── app.component.ts
    │   ├── app.config.ts
    │   ├── app.routes.ts
    │   ├── components
    │   │   ├── button
    │   │   │   └── button.component.ts
    │   │   ├── header
    │   │   │   └── header.component.ts
    │   │   └── primary-button
    │   │   │   └── primary-button.component.ts
    │   ├── pages
    │   │   ├── cart
    │   │   │   ├── cart-item
    │   │   │   │   └── cart-item.component.ts
    │   │   │   ├── cart.component.ts
    │   │   │   └── order-summary
    │   │   │   │   └── order-summary.component.ts
    │   │   └── products-list
    │   │   │   ├── product-card
    │   │   │       └── product-card.component.ts
    │   │   │   └── products-list.component.ts
    │   └── services
    │   │   └── cart.service.ts
    ├── index.html
    ├── main.ts
    └── styles.scss
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | ij_typescript_use_double_quotes = false
14 | 
15 | [*.md]
16 | max_line_length = off
17 | trim_trailing_whitespace = false
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 2 | 
 3 | # Compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AngularEcommerce
 2 | 
 3 | This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
 4 | 
 5 | ## Development server
 6 | 
 7 | To start a local development server, run:
 8 | 
 9 | ```bash
10 | ng serve
11 | ```
12 | 
13 | Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14 | 
15 | ## Code scaffolding
16 | 
17 | Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18 | 
19 | ```bash
20 | ng generate component component-name
21 | ```
22 | 
23 | For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24 | 
25 | ```bash
26 | ng generate --help
27 | ```
28 | 
29 | ## Building
30 | 
31 | To build the project run:
32 | 
33 | ```bash
34 | ng build
35 | ```
36 | 
37 | This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38 | 
39 | ## Running unit tests
40 | 
41 | To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42 | 
43 | ```bash
44 | ng test
45 | ```
46 | 
47 | ## Running end-to-end tests
48 | 
49 | For end-to-end (e2e) testing, run:
50 | 
51 | ```bash
52 | ng e2e
53 | ```
54 | 
55 | Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56 | 
57 | ## Additional Resources
58 | 
59 | For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
60 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular-ecommerce": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "inlineTemplate": true,
 11 |           "inlineStyle": true,
 12 |           "style": "scss",
 13 |           "skipTests": true
 14 |         },
 15 |         "@schematics/angular:class": {
 16 |           "skipTests": true
 17 |         },
 18 |         "@schematics/angular:directive": {
 19 |           "skipTests": true
 20 |         },
 21 |         "@schematics/angular:guard": {
 22 |           "skipTests": true
 23 |         },
 24 |         "@schematics/angular:interceptor": {
 25 |           "skipTests": true
 26 |         },
 27 |         "@schematics/angular:pipe": {
 28 |           "skipTests": true
 29 |         },
 30 |         "@schematics/angular:resolver": {
 31 |           "skipTests": true
 32 |         },
 33 |         "@schematics/angular:service": {
 34 |           "skipTests": true
 35 |         }
 36 |       },
 37 |       "root": "",
 38 |       "sourceRoot": "src",
 39 |       "prefix": "app",
 40 |       "architect": {
 41 |         "build": {
 42 |           "builder": "@angular-devkit/build-angular:application",
 43 |           "options": {
 44 |             "outputPath": "dist/angular-ecommerce",
 45 |             "index": "src/index.html",
 46 |             "browser": "src/main.ts",
 47 |             "polyfills": [
 48 |               "zone.js"
 49 |             ],
 50 |             "tsConfig": "tsconfig.app.json",
 51 |             "inlineStyleLanguage": "scss",
 52 |             "assets": [
 53 |               {
 54 |                 "glob": "**/*",
 55 |                 "input": "public"
 56 |               }
 57 |             ],
 58 |             "styles": [
 59 |               "src/styles.scss"
 60 |             ],
 61 |             "scripts": []
 62 |           },
 63 |           "configurations": {
 64 |             "production": {
 65 |               "budgets": [
 66 |                 {
 67 |                   "type": "initial",
 68 |                   "maximumWarning": "500kB",
 69 |                   "maximumError": "1MB"
 70 |                 },
 71 |                 {
 72 |                   "type": "anyComponentStyle",
 73 |                   "maximumWarning": "4kB",
 74 |                   "maximumError": "8kB"
 75 |                 }
 76 |               ],
 77 |               "outputHashing": "all"
 78 |             },
 79 |             "development": {
 80 |               "optimization": false,
 81 |               "extractLicenses": false,
 82 |               "sourceMap": true
 83 |             }
 84 |           },
 85 |           "defaultConfiguration": "production"
 86 |         },
 87 |         "serve": {
 88 |           "builder": "@angular-devkit/build-angular:dev-server",
 89 |           "configurations": {
 90 |             "production": {
 91 |               "buildTarget": "angular-ecommerce:build:production"
 92 |             },
 93 |             "development": {
 94 |               "buildTarget": "angular-ecommerce:build:development"
 95 |             }
 96 |           },
 97 |           "defaultConfiguration": "development"
 98 |         },
 99 |         "extract-i18n": {
100 |           "builder": "@angular-devkit/build-angular:extract-i18n"
101 |         },
102 |         "test": {
103 |           "builder": "@angular-devkit/build-angular:karma",
104 |           "options": {
105 |             "polyfills": [
106 |               "zone.js",
107 |               "zone.js/testing"
108 |             ],
109 |             "tsConfig": "tsconfig.spec.json",
110 |             "inlineStyleLanguage": "scss",
111 |             "assets": [
112 |               {
113 |                 "glob": "**/*",
114 |                 "input": "public"
115 |               }
116 |             ],
117 |             "styles": [
118 |               "src/styles.scss"
119 |             ],
120 |             "scripts": []
121 |           }
122 |         }
123 |       }
124 |     }
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-ecommerce",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "watch": "ng build --watch --configuration development",
 9 |     "test": "ng test"
10 |   },
11 |   "private": true,
12 |   "dependencies": {
13 |     "@angular/animations": "^19.0.0",
14 |     "@angular/common": "^19.0.0",
15 |     "@angular/compiler": "^19.0.0",
16 |     "@angular/core": "^19.0.0",
17 |     "@angular/forms": "^19.0.0",
18 |     "@angular/platform-browser": "^19.0.0",
19 |     "@angular/platform-browser-dynamic": "^19.0.0",
20 |     "@angular/router": "^19.0.0",
21 |     "rxjs": "~7.8.0",
22 |     "tslib": "^2.3.0",
23 |     "zone.js": "~0.15.0"
24 |   },
25 |   "devDependencies": {
26 |     "@angular-devkit/build-angular": "^19.0.0",
27 |     "@angular/cli": "^19.0.0",
28 |     "@angular/compiler-cli": "^19.0.0",
29 |     "@types/jasmine": "~5.1.0",
30 |     "autoprefixer": "^10.4.20",
31 |     "jasmine-core": "~5.4.0",
32 |     "karma": "~6.4.0",
33 |     "karma-chrome-launcher": "~3.2.0",
34 |     "karma-coverage": "~2.2.0",
35 |     "karma-jasmine": "~5.1.0",
36 |     "karma-jasmine-html-reporter": "~2.1.0",
37 |     "postcss": "^8.4.49",
38 |     "tailwindcss": "^3.4.15",
39 |     "typescript": "~5.6.2"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thisiszoaib/angular-ecommerce/0431485795a5daded7e0133d112c71dc01074f40/public/favicon.ico


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { HeaderComponent } from './components/header/header.component';
 3 | import { RouterOutlet } from '@angular/router';
 4 | 
 5 | @Component({
 6 |   selector: 'app-root',
 7 |   imports: [RouterOutlet, HeaderComponent],
 8 |   template: `
 9 |     <app-header />
10 |     <router-outlet />
11 |   `,
12 |   styles: [],
13 | })
14 | export class AppComponent {}
15 | 


--------------------------------------------------------------------------------
/src/app/app.config.ts:
--------------------------------------------------------------------------------
1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2 | import { provideRouter } from '@angular/router';
3 | 
4 | import { routes } from './app.routes';
5 | 
6 | export const appConfig: ApplicationConfig = {
7 |   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
8 | };
9 | 


--------------------------------------------------------------------------------
/src/app/app.routes.ts:
--------------------------------------------------------------------------------
 1 | import { Routes } from '@angular/router';
 2 | import { ProductsListComponent } from './pages/products-list/products-list.component';
 3 | import { CartComponent } from './pages/cart/cart.component';
 4 | 
 5 | export const routes: Routes = [
 6 |   {
 7 |     path: '',
 8 |     pathMatch: 'full',
 9 |     component: ProductsListComponent,
10 |   },
11 |   {
12 |     path: 'cart',
13 |     component: CartComponent,
14 |   },
15 | ];
16 | 


--------------------------------------------------------------------------------
/src/app/components/button/button.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, input, output } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-button',
 5 |   imports: [],
 6 |   template: `
 7 |     <button
 8 |       class=" text-black w-full px-5 py-2 rounded-xl shadow-md hover:bg-slate-200"
 9 |       (click)="btnClicked.emit()"
10 |     >
11 |       <span class="text-md">{{ label() }}</span>
12 |     </button>
13 |   `,
14 |   styles: ``,
15 | })
16 | export class ButtonComponent {
17 |   label = input<string>();
18 | 
19 |   btnClicked = output();
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/components/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, computed, inject } from '@angular/core';
 2 | import { CartService } from '../../services/cart.service';
 3 | import { RouterLink } from '@angular/router';
 4 | import { PrimaryButtonComponent } from '../primary-button/primary-button.component';
 5 | 
 6 | @Component({
 7 |   selector: 'app-header',
 8 |   imports: [PrimaryButtonComponent, RouterLink],
 9 |   template: `
10 |     <div
11 |       class="bg-slate-100 px-4 py-3 shadow-md flex justify-between items-center"
12 |     >
13 |       <button class="text-2xl" routerLink="/">My Store</button>
14 |       <app-primary-button label="{{ cartLabel() }}" routerLink="/cart" />
15 |     </div>
16 |   `,
17 |   styles: ``,
18 | })
19 | export class HeaderComponent {
20 |   cartService = inject(CartService);
21 | 
22 |   cartLabel = computed(() => `Cart (${this.cartService.cart().length})`);
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/components/primary-button/primary-button.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, input, output } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-primary-button',
 5 |   imports: [],
 6 |   template: `
 7 |     <button
 8 |       class=" bg-blue-500 text-white w-full border px-5 py-2 rounded-xl shadow-md hover:opacity-90"
 9 |       (click)="btnClicked.emit()"
10 |     >
11 |       <span class="text-md">{{ label() }}</span>
12 |     </button>
13 |   `,
14 |   styles: ``,
15 | })
16 | export class PrimaryButtonComponent {
17 |   label = input<string>();
18 | 
19 |   btnClicked = output();
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/pages/cart/cart-item/cart-item.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, inject, input } from '@angular/core';
 2 | import { Product } from '../../products-list/products-list.component';
 3 | import { ButtonComponent } from '../../../components/button/button.component';
 4 | import { CartService } from '../../../services/cart.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-cart-item',
 8 |   imports: [ButtonComponent],
 9 |   template: `
10 |     <div
11 |       class="bg-white shadow-md border rounded-xl p-6 flex gap-4 items-center"
12 |     >
13 |       <img [src]="item().image" class="w-[50px] h-[50px] object-contain" />
14 |       <div class="flex flex-col">
15 |         <span class="text-md font-bold">{{ item().title }}</span>
16 |         <span class="text-sm"> {{ '$' + item().price }}</span>
17 |       </div>
18 |       <div class="flex-1"></div>
19 |       <app-button
20 |         label="Remove"
21 |         (btnClicked)="cartService.removeFromCart(item())"
22 |       />
23 |     </div>
24 |   `,
25 |   styles: ``,
26 | })
27 | export class CartItemComponent {
28 |   item = input.required<Product>();
29 | 
30 |   cartService = inject(CartService);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/pages/cart/cart.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, inject } from '@angular/core';
 2 | import { CartService } from '../../services/cart.service';
 3 | import { CartItemComponent } from './cart-item/cart-item.component';
 4 | import { OrderSummaryComponent } from './order-summary/order-summary.component';
 5 | import { ButtonComponent } from '../../components/button/button.component';
 6 | import { RouterLink } from '@angular/router';
 7 | 
 8 | @Component({
 9 |   selector: 'app-cart',
10 |   imports: [CartItemComponent, OrderSummaryComponent],
11 |   template: `
12 |     <div class="p-6 flex flex-col gap-4">
13 |       <h2 class="text-2xl">Shopping cart</h2>
14 | 
15 |       @for (item of cartService.cart(); track item.id) {
16 |       <app-cart-item [item]="item" />
17 |       }
18 |       <app-order-summary />
19 |     </div>
20 |   `,
21 |   styles: ``,
22 | })
23 | export class CartComponent {
24 |   cartService = inject(CartService);
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/pages/cart/order-summary/order-summary.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, computed, inject } from '@angular/core';
 2 | import { CartService } from '../../../services/cart.service';
 3 | import { ButtonComponent } from '../../../components/button/button.component';
 4 | import { PrimaryButtonComponent } from '../../../components/primary-button/primary-button.component';
 5 | 
 6 | @Component({
 7 |   selector: 'app-order-summary',
 8 |   imports: [PrimaryButtonComponent],
 9 |   template: `
10 |     <div class="bg-slate-100 p-6 rounded-xl shadow-xl border">
11 |       <h2 class="text-2xl">Order Summary</h2>
12 |       <div class="flex flex-col gap-4">
13 |         <div class="flex gap-4">
14 |           <span class="text-lg">Total</span>
15 |           <span class="text-lg font-bold">{{ '$ ' + total() }}</span>
16 |         </div>
17 |         <app-primary-button label="Proceed to checkout" />
18 |       </div>
19 |     </div>
20 |   `,
21 |   styles: ``,
22 | })
23 | export class OrderSummaryComponent {
24 |   cartService = inject(CartService);
25 | 
26 |   total = computed(() => {
27 |     let total = 0;
28 |     for (const item of this.cartService.cart()) {
29 |       total += item.price;
30 |     }
31 | 
32 |     return total;
33 |   });
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/pages/products-list/product-card/product-card.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, inject, input } from '@angular/core';
 2 | import { Product } from '../products-list.component';
 3 | import { CartService } from '../../../services/cart.service';
 4 | import { PrimaryButtonComponent } from '../../../components/primary-button/primary-button.component';
 5 | 
 6 | @Component({
 7 |   selector: 'app-product-card',
 8 |   imports: [PrimaryButtonComponent],
 9 |   template: `
10 |     <div
11 |       class="bg-white shadow-md border rounded-xl p-6 flex flex-col gap-6 relative"
12 |     >
13 |       <div class="mx-auto">
14 |         <img
15 |           [src]="product().image"
16 |           class="w-[200px] h-[100px] object-contain"
17 |         />
18 |       </div>
19 |       <div class="flex flex-col">
20 |         <span class="text-md font-bold">{{ product().title }}</span>
21 |         <span class="text-sm"> {{ '$' + product().price }}</span>
22 |         <app-primary-button
23 |           (btnClicked)="cartService.addToCart(product())"
24 |           class="mt-3"
25 |           label="Add to Cart"
26 |         />
27 |       </div>
28 | 
29 |       <span
30 |         class="absolute top-2 right-3 text-sm font-bold"
31 |         [class]="product().stock ? 'text-green-500' : 'text-red-500'"
32 |       >
33 |         @if (product().stock) {
34 |         {{ product().stock }} left } @else { Out of stock }
35 |       </span>
36 |     </div>
37 |   `,
38 |   styles: ``,
39 | })
40 | export class ProductCardComponent {
41 |   cartService = inject(CartService);
42 | 
43 |   product = input.required<Product>();
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/pages/products-list/products-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, signal } from '@angular/core';
 2 | import { ProductCardComponent } from './product-card/product-card.component';
 3 | 
 4 | export type Product = {
 5 |   id: number;
 6 |   title: string;
 7 |   price: number;
 8 |   image: string;
 9 |   stock?: number;
10 | };
11 | 
12 | @Component({
13 |   selector: 'app-products-list',
14 |   imports: [ProductCardComponent],
15 |   template: `
16 |     <div class="p-8 grid grid-cols-2 gap-4">
17 |       @for (product of products(); track product.id) {
18 |       <app-product-card [product]="product" />
19 |       }
20 |     </div>
21 |   `,
22 |   styles: ``,
23 | })
24 | export class ProductsListComponent {
25 |   products = signal<Product[]>([
26 |     {
27 |       id: 1,
28 |       title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
29 |       price: 109.95,
30 |       image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
31 |       stock: 10,
32 |     },
33 |     {
34 |       id: 2,
35 |       title: 'Mens Casual Premium Slim Fit T-Shirts ',
36 |       price: 22.3,
37 |       image:
38 |         'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg',
39 |       stock: 0,
40 |     },
41 |     {
42 |       id: 3,
43 |       title: 'Mens Cotton Jacket',
44 |       price: 55.99,
45 | 
46 |       image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg',
47 |       stock: 5,
48 |     },
49 |     {
50 |       id: 4,
51 |       title: 'Mens Casual Slim Fit',
52 |       price: 15.99,
53 |       image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg',
54 |       stock: 7,
55 |     },
56 |   ]);
57 | }
58 | 


--------------------------------------------------------------------------------
/src/app/services/cart.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable, signal } from '@angular/core';
 2 | import { Product } from '../pages/products-list/products-list.component';
 3 | 
 4 | @Injectable({
 5 |   providedIn: 'root',
 6 | })
 7 | export class CartService {
 8 |   cart = signal<Product[]>([]);
 9 | 
10 |   addToCart(product: Product) {
11 |     this.cart.set([...this.cart(), product]);
12 |   }
13 | 
14 |   removeFromCart(product: Product) {
15 |     this.cart.set(this.cart().filter((p) => p.id !== product.id));
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>AngularEcommerce</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { appConfig } from './app/app.config';
3 | import { AppComponent } from './app/app.component';
4 | 
5 | bootstrapApplication(AppComponent, appConfig)
6 |   .catch((err) => console.error(err));
7 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./src/**/*.{html,ts}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 3 | {
 4 |   "extends": "./tsconfig.json",
 5 |   "compilerOptions": {
 6 |     "outDir": "./out-tsc/app",
 7 |     "types": []
 8 |   },
 9 |   "files": [
10 |     "src/main.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 3 | {
 4 |   "compileOnSave": false,
 5 |   "compilerOptions": {
 6 |     "outDir": "./dist/out-tsc",
 7 |     "strict": true,
 8 |     "noImplicitOverride": true,
 9 |     "noPropertyAccessFromIndexSignature": true,
10 |     "noImplicitReturns": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "skipLibCheck": true,
13 |     "isolatedModules": true,
14 |     "esModuleInterop": true,
15 |     "experimentalDecorators": true,
16 |     "moduleResolution": "bundler",
17 |     "importHelpers": true,
18 |     "target": "ES2022",
19 |     "module": "ES2022"
20 |   },
21 |   "angularCompilerOptions": {
22 |     "enableI18nLegacyMessageIdFormat": false,
23 |     "strictInjectionParameters": true,
24 |     "strictInputAccessModifiers": true,
25 |     "strictTemplates": true
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 3 | {
 4 |   "extends": "./tsconfig.json",
 5 |   "compilerOptions": {
 6 |     "outDir": "./out-tsc/spec",
 7 |     "types": [
 8 |       "jasmine"
 9 |     ]
10 |   },
11 |   "include": [
12 |     "src/**/*.spec.ts",
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------