"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: _jsx(_components.strong, { children: "Building a Modern E-commerce App with Angular 19, Tailwind CSS, Supabase, and NgRx - Part 1" }) }), "\n", _jsx(_components.p, { children: "This guide walks through the process of building a simple e-commerce application for shoes using Angular, styling with Tailwind CSS, managing the backend with Supabase, and implementing state management with NgRx." }), "\n", _jsx(_components.h2, { children: "1. Project Setup" }), "\n", _jsx(_components.p, { children: "First, let's create a new Angular project and navigate into the project directory." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: ["ng new shoe-shop\n", _jsx(_components.span, { className: "hljs-built_in", children: "cd" }), " shoe-shop\n"] }) }), "\n", _jsx(_components.h2, { children: "2. Install Tailwind CSS with Angular" }), "\n", _jsx(_components.p, { children: "Follow these steps to integrate Tailwind CSS into your Angular project." }), "\n", _jsx(_components.h3, { children: "01. Install Tailwind CSS Dependencies" }), "\n", _jsxs(_components.p, { children: ["Install ", _jsx(_components.code, { children: "tailwindcss" }), ", ", _jsx(_components.code, { children: "@tailwindcss/postcss" }), ", and ", _jsx(_components.code, { children: "postcss" }), ". The ", _jsx(_components.code, { children: "--force" }), " flag might be needed depending on your npm version and project dependencies."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm install tailwindcss @tailwindcss/postcss postcss --force\n" }) }), "\n", _jsx(_components.h3, { children: "02. Configure PostCSS Plugins" }), "\n", _jsxs(_components.p, { children: ["Create a ", _jsx(_components.code, { children: ".postcssrc.json" }), " file in the root of your project. Add the ", _jsx(_components.code, { children: "@tailwindcss/postcss" }), " plugin to your PostCSS configuration."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: ".postcssrc.json" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-json", children: [_jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"plugins\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"@tailwindcss/postcss\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.h3, { children: "03. Use Tailwind CSS" }), "\n", _jsxs(_components.p, { children: ["Import Tailwind CSS in your main styles file. If you are using SCSS, the file will be ", _jsx(_components.code, { children: "src/styles.scss" }), ". If you opted for CSS, it will be ", _jsx(_components.code, { children: "src/styles.css" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "./src/styles.scss" }), " (or ", _jsx(_components.strong, { children: "./src/styles.css" }), ")"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-scss", children: [_jsx(_components.span, { className: "hljs-keyword", children: "@use" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'tailwindcss'" }), ";\n"] }) }), "\n", _jsx(_components.h2, { children: "3. Create Layout Component" }), "\n", _jsx(_components.p, { children: "Generate a layout component. We'll use this as the main structure for our application." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npx ng g c layout\n" }) }), "\n", _jsxs(_components.p, { children: ["Since we are using Tailwind CSS for styling, we might not need component-specific SCSS files. You can configure Angular CLI to not generate ", _jsx(_components.code, { children: ".scss" }), " files or delete them manually."] }), "\n", _jsx(_components.p, { children: "Update the layout component's TypeScript file." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "layout.component.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Component" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/common'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Import CommonModule for *ngFor, etc." }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../add-shoe-modal/add-shoe-modal.component'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Will be created later" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe-item/shoe-item.component'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Will be created later" }), "\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Component" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "selector" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'app-layout'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "standalone" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Assuming standalone components based on modern Angular practices" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "imports" }), ": [", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), "], ", _jsx(_components.span, { className: "hljs-comment", children: "// Add necessary imports" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "templateUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'./layout.component.html'" }), ",\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutComponent" }), " {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Logic will be added later" }), "\n}\n"] }) }), "\n", _jsx(_components.p, { children: _jsxs(_components.em, { children: ["(Note: Added ", _jsx(_components.code, { children: "standalone: true" }), " and ", _jsx(_components.code, { children: "imports" }), " array based on modern Angular practices. If you are not using standalone components, adjust accordingly by declaring them in an NgModule.)"] }) }), "\n", _jsx(_components.h2, { children: "4. Configure Routing" }), "\n", _jsxs(_components.p, { children: ["Define the routes for the application. For now, we'll set the ", _jsx(_components.code, { children: "LayoutComponent" }), " as the default route."] }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app.routes.ts" }), " (if it doesn't exist, or update ", _jsx(_components.code, { children: "app-routing.module.ts" }), ")."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "app.routes.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Routes" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/router'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./layout/layout.component'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "routes" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Routes" }), " = [{ ", _jsx(_components.span, { className: "hljs-attr", children: "path" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "component" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutComponent" }), " }];\n"] }) }), "\n", _jsxs(_components.p, { children: ["Ensure these routes are provided in your main application configuration (", _jsx(_components.code, { children: "app.config.ts" }), " for standalone or ", _jsx(_components.code, { children: "app.module.ts" }), ")."] }), "\n", _jsx(_components.h2, { children: "5. Design Layout Structure" }), "\n", _jsxs(_components.p, { children: ["Create a layout with four sections using Tailwind CSS utility classes in the ", _jsx(_components.code, { children: "layout.component.html" }), "."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "layout.component.html" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex w-full\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "main" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex h-screen w-2/3 flex-col\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "section" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-1/3 bg-orange-500\"" }), ">"] }), "this is section 1 (Add shoe section)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "section" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-2/3 bg-blue-500\"" }), ">"] }), "this is section 2 (Shoe list section)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "aside" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex h-screen w-1/3 flex-col\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-1/3 bg-red-500\"" }), ">"] }), "this is section 3", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-2/3 bg-green-500\"" }), ">"] }), "this is section 4", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.h2, { children: "6. Integrate Supabase" }), "\n", _jsx(_components.p, { children: "Now, let's add Supabase for backend services." }), "\n", _jsx(_components.h3, { children: "Install Supabase Client" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm install @supabase/supabase-js\n" }) }), "\n", _jsx(_components.h3, { children: "Generate Environment Files" }), "\n", _jsx(_components.p, { children: "If you haven't already, generate environment files." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "ng generate environments\n" }) }), "\n", _jsx(_components.h3, { children: "Configure Environment Variables" }), "\n", _jsxs(_components.p, { children: ["Add your Supabase URL and Anon Key to ", _jsx(_components.code, { children: "src/environments/environment.ts" }), " (and ", _jsx(_components.code, { children: "src/environments/environment.prod.ts" }), " for production)."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/environments/environment.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " environment = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "production" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "supabaseUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'YOUR_SUPABASE_URL'" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Replace with your actual Supabase URL" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "supabaseKey" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'YOUR_SUPABASE_ANON_KEY'" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Replace with your actual Supabase Anon Key" }), "\n};\n"] }) }), "\n", _jsx(_components.h3, { children: "Create Supabase Service" }), "\n", _jsx(_components.p, { children: "Generate a service to interact with Supabase." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "ng g s services/supabase\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/services/supabase.service.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Injectable" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createClient, ", _jsx(_components.span, { className: "hljs-title class_", children: "SupabaseClient" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/supabase-js'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { environment } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../../environments/environment'" }), ";\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Injectable" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "providedIn" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'root'" }), ",\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "SupabaseService" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "supabase" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "SupabaseClient" }), ";\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "supabase" }), " = ", _jsx(_components.span, { className: "hljs-title function_", children: "createClient" }), "(environment.", _jsx(_components.span, { className: "hljs-property", children: "supabaseUrl" }), ", environment.", _jsx(_components.span, { className: "hljs-property", children: "supabaseKey" }), ");\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "get" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "client" }), "() {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "supabase" }), ";\n }\n}\n"] }) }), "\n", _jsx(_components.h3, { children: "Create 'shoes' Table in Supabase" }), "\n", _jsx(_components.p, { children: "In your Supabase SQL editor, create a new table for shoes." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["create table ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes" }), " (\n id uuid not ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "gen_random_uuid" }), " (),\n name text not ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n price numeric not ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n description text not ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n created_at timestamp ", _jsx(_components.span, { className: "hljs-keyword", children: "with" }), " time zone ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "now" }), "(),\n constraint shoes_pkey primary ", _jsx(_components.span, { className: "hljs-title function_", children: "key" }), " (id)\n) tablespace pg_default;\n"] }) }), "\n", _jsx(_components.p, { children: "You can manually add initial data to this table via the Supabase dashboard or use its CSV import feature." }), "\n", _jsxs(_components.p, { children: ["To get started quickly, you can download our example CSV file with sample shoe data from ", _jsx(_components.a, { href: "https://www.kornchanok.dev/files/shoes-list.csv", children: _jsx(_components.code, { children: "this link" }) }), ". The CSV file contains the following columns:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "name: The name of the shoe" }), "\n", _jsx(_components.li, { children: "price: The price" }), "\n", _jsx(_components.li, { children: "description: A brief description of the shoe" }), "\n"] }), "\n", _jsx(_components.h2, { children: "7. Define Shoe Interface" }), "\n", _jsx(_components.p, { children: "Create an interface for the shoe data structure." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/shoe.interface.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Supabase uses uuid, which is a string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "created_at" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Optional, from Supabase" }), "\n}\n"] }) }), "\n", _jsx(_components.p, { children: _jsxs(_components.em, { children: ["(Note: Changed ", _jsx(_components.code, { children: "id" }), " type from ", _jsx(_components.code, { children: "number" }), " to ", _jsx(_components.code, { children: "string" }), " as Supabase ", _jsx(_components.code, { children: "uuid" }), " is a string. Made ", _jsx(_components.code, { children: "id" }), " and ", _jsx(_components.code, { children: "created_at" }), " optional for new shoe objects before they are saved.)"] }) }), "\n", _jsx(_components.h2, { children: "8. Create Shoe Service" }), "\n", _jsx(_components.p, { children: "Generate a service for managing shoe data." }), "\n", _jsx(_components.p, { children: "Bash" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-txt", children: "ng g s services/shoe\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/services/shoe.service.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Injectable" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "SupabaseService" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./supabase.service'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe.interface'" }), ";\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Injectable" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "providedIn" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'root'" }), ",\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeService" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "supabaseService" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "SupabaseService" })] }), ") {}\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getShoes" }), "(): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[]> {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data, error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "supabaseService" }), ".", _jsx(_components.span, { className: "hljs-property", children: "client" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'shoes'" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'*'" }), ");\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Error fetching shoes:'" }), ", error);\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " error;\n }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (data ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[]) || []; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure it returns an array even if data is null" }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "addShoe" }), "(", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Omit" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), ">): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "> {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data, error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "supabaseService" }), ".", _jsx(_components.span, { className: "hljs-property", children: "client" }), "\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'shoes'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "insert" }), "(shoe)\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'*'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "();\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Error adding shoe:'" }), ", error);\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " error;\n }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " data ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ";\n }\n}\n"] }) }), "\n", _jsx(_components.p, { children: _jsxs(_components.em, { children: ["(Note: Modified ", _jsx(_components.code, { children: "addShoe" }), " to accept ", _jsx(_components.code, { children: "Omit" }), " as ", _jsx(_components.code, { children: "id" }), " and ", _jsx(_components.code, { children: "created_at" }), " are generated by Supabase. Added basic error logging.)"] }) }), "\n", _jsx(_components.h2, { children: "9. Display Shoes in Layout (Initial Version - Without NgRx)" }), "\n", _jsxs(_components.p, { children: ["Let's update the ", _jsx(_components.code, { children: "LayoutComponent" }), " to fetch and display shoes using the ", _jsx(_components.code, { children: "ShoeService" }), "."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/layout/layout.component.ts (Initial Version)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Component" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "OnInit" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ViewChild" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Added ViewChild" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeService" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../services/shoe.service'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe.interface'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/common'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../add-shoe-modal/add-shoe-modal.component'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure this is created" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe-item/shoe-item.component'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure this is created" }), "\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Component" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "selector" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'app-layout'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "standalone" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "imports" }), ": [", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "templateUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'./layout.component.html'" }), ",\n ", _jsx(_components.span, { className: "hljs-comment", children: "// styleUrls: ['./layout.component.css'] // If you have specific styles" }), "\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutComponent" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "implements" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "OnInit" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoeService" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeService" })] }), ") {}\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoes" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[] = [];\n ", _jsx(_components.span, { className: "hljs-meta", children: "@ViewChild" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'addShoeModal'" }), ") addShoeModal!: ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// For modal interaction" }), "\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "ngOnInit" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeService" }), "\n .", _jsx(_components.span, { className: "hljs-title function_", children: "getShoes" }), "()\n .", _jsx(_components.span, { className: "hljs-title function_", children: "then" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "shoes" }), " =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes" }), " = shoes;\n })\n .", _jsx(_components.span, { className: "hljs-title function_", children: "catch" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "error" }), " =>"] }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Failed to load shoes'" }), ", error));\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handleAddShoe" }), "(", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Omit" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), ">): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Shoe to add:'" }), ", shoe);\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeService" }), "\n .", _jsx(_components.span, { className: "hljs-title function_", children: "addShoe" }), "(shoe)\n .", _jsx(_components.span, { className: "hljs-title function_", children: "then" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "newShoe" }), " =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "push" }), "(newShoe); ", _jsx(_components.span, { className: "hljs-comment", children: "// Simple push for now" }), "\n })\n .", _jsx(_components.span, { className: "hljs-title function_", children: "catch" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "error" }), " =>"] }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Failed to add shoe'" }), ", error));\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "openAddShoeModal" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoeModal" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "show" }), "();\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "closeAddShoeModal" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// The original had hide(false), assuming false meant don't emit close event" }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "// If AddShoeModalComponent's hide method handles this, direct call is fine." }), "\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoeModal" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "hide" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ");\n }\n}\n"] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/layout/layout.component.html (Section 2 for displaying shoes)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["

\n"] }) }), "\n", _jsx(_components.h2, { children: "10. Create Add Shoe Modal Component" }), "\n", _jsx(_components.p, { children: "Generate a component for the \"Add Shoe\" modal form." }), "\n", _jsx(_components.p, { children: "Bash" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-txt", children: "ng g c add-shoe-modal --standalone\n" }) }), "\n", _jsx(_components.p, { children: _jsxs(_components.em, { children: ["(Using ", _jsx(_components.code, { children: "--standalone" }), " for consistency. If not using standalone, remember to declare and export it from a module.)"] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/add-shoe-modal/add-shoe-modal.component.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/common'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Component" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "EventEmitter" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Output" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "FormBuilder" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "FormGroup" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ReactiveFormsModule" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Validators" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/forms'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe.interface'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure path is correct" }), "\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Component" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "selector" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'app-add-shoe-modal'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "standalone" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "imports" }), ": [", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ReactiveFormsModule" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "templateUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'./add-shoe-modal.component.html'" }), ",\n ", _jsx(_components.span, { className: "hljs-comment", children: "// styleUrls: ['./add-shoe-modal.component.css']" }), "\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), " {\n ", _jsx(_components.span, { className: "hljs-meta", children: "@Output" }), "() addShoe = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "EventEmitter" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Omit" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), ">>();\n ", _jsx(_components.span, { className: "hljs-meta", children: "@Output" }), "() close = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "EventEmitter" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), ">();\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoeForm" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FormGroup" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " isVisible = ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ";\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fb" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "FormBuilder" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeForm" }), " = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "fb" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "group" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": [", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", [", _jsx(_components.span, { className: "hljs-title class_", children: "Validators" }), ".", _jsx(_components.span, { className: "hljs-property", children: "required" }), "]],\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": [", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", [", _jsx(_components.span, { className: "hljs-title class_", children: "Validators" }), ".", _jsx(_components.span, { className: "hljs-property", children: "required" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Validators" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "min" }), "(", _jsx(_components.span, { className: "hljs-number", children: "0" }), ")]],\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": [", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", [", _jsx(_components.span, { className: "hljs-title class_", children: "Validators" }), ".", _jsx(_components.span, { className: "hljs-property", children: "required" }), "]],\n });\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "show" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "isVisible" }), " = ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ";\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "hide" }), "(", _jsx(_components.span, { className: "hljs-attr", children: "emitEvent" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), " = ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), "): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "isVisible" }), " = ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (emitEvent) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "close" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "emit" }), "();\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "onSubmit" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeForm" }), ".", _jsx(_components.span, { className: "hljs-property", children: "valid" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoe" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "emit" }), "(", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeForm" }), ".", _jsx(_components.span, { className: "hljs-property", children: "value" }), ");\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "hide" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "); ", _jsx(_components.span, { className: "hljs-comment", children: "// Hide without emitting 'close' as 'addShoe' implies interaction is done" }), "\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeForm" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "reset" }), "();\n }\n }\n}\n"] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/add-shoe-modal/add-shoe-modal.component.html" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["

\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex justify-between items-center mb-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-bold text-white\"" }), ">"] }), "Add New Shoe", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), " (", _jsx(_components.span, { className: "hljs-attr", children: "click" }), ")=", _jsx(_components.span, { className: "hljs-string", children: "\"hide()\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-white hover:text-gray-300\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-6 h-6\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke-linecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke-linejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke-width" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"2\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M6 18L18 6M6 6l12 12\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "form" }), " [", _jsx(_components.span, { className: "hljs-attr", children: "formGroup" }), "]=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm\"" }), " (", _jsx(_components.span, { className: "hljs-attr", children: "ngSubmit" }), ")=", _jsx(_components.span, { className: "hljs-string", children: "\"onSubmit()\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex flex-col gap-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex flex-col\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "for" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"name\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-white font-medium mb-1\"" }), ">"] }), "Shoe Name", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"name\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "formControlName" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"name\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"p-2 rounded border-2 border-gray-600 bg-gray-700 text-white focus:border-orange-500 focus:outline-none\"" }), "\n [", _jsx(_components.span, { className: "hljs-attr", children: "class.border-red-500" }), "]=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.get('name')?.invalid && shoeForm.get('name')?.touched\"" }), "\n >"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-red-400 text-sm mt-1\"" }), " *", _jsx(_components.span, { className: "hljs-attr", children: "ngIf" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.get('name')?.invalid && shoeForm.get('name')?.touched\"" }), ">"] }), "\n Name is required\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex flex-col\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "for" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"price\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-white font-medium mb-1\"" }), ">"] }), "Price", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"number\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"price\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "formControlName" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"price\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"p-2 rounded border-2 border-gray-600 bg-gray-700 text-white focus:border-orange-500 focus:outline-none\"" }), "\n [", _jsx(_components.span, { className: "hljs-attr", children: "class.border-red-500" }), "]=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.get('price')?.invalid && shoeForm.get('price')?.touched\"" }), "\n >"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-red-400 text-sm mt-1\"" }), " *", _jsx(_components.span, { className: "hljs-attr", children: "ngIf" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.get('price')?.invalid && shoeForm.get('price')?.touched\"" }), ">"] }), "\n Valid price is required (must be 0 or more)\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex flex-col\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "for" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"description\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-white font-medium mb-1\"" }), ">"] }), "Description", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "textarea" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"description\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "formControlName" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"description\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "rows" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"3\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"p-2 rounded border-2 border-gray-600 bg-gray-700 text-white focus:border-orange-500 focus:outline-none\"" }), "\n [", _jsx(_components.span, { className: "hljs-attr", children: "class.border-red-500" }), "]=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.get('description')?.invalid && shoeForm.get('description')?.touched\"" }), "\n >"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-red-400 text-sm mt-1\"" }), " *", _jsx(_components.span, { className: "hljs-attr", children: "ngIf" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.get('description')?.invalid && shoeForm.get('description')?.touched\"" }), ">"] }), "\n Description is required\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex justify-end gap-2 mt-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button\"" }), "\n (", _jsx(_components.span, { className: "hljs-attr", children: "click" }), ")=", _jsx(_components.span, { className: "hljs-string", children: "\"hide()\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"px-4 py-2 rounded bg-gray-600 text-white hover:bg-gray-500 transition-colors\"" }), "\n >"] }), "\n Cancel\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"submit\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"px-4 py-2 rounded bg-orange-500 text-white hover:bg-orange-400 transition-colors\"" }), "\n [", _jsx(_components.span, { className: "hljs-attr", children: "disabled" }), "]=", _jsx(_components.span, { className: "hljs-string", children: "\"shoeForm.invalid\"" }), "\n >"] }), "\n Add Shoe\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "LayoutComponent" }), " to use the modal."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/layout/layout.component.html (Section 1 for adding shoes)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["

{", _jsx(_components.span, { className: "hljs-comment", children: "/* Changed bg color for contrast */" }), "}\n

\n"] }) }), "\n", _jsx(_components.h2, { children: "11. Create Shoe Item Component" }), "\n", _jsx(_components.p, { children: "Generate a reusable component to display each shoe." }), "\n", _jsx(_components.p, { children: "Bash" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-tsx", children: "ng g c shoe-item --standalone\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/shoe-item/shoe-item.component.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Component" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Input" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe.interface'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure path is correct" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/common'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// For pipes like 'currency'" }), "\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Component" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "selector" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'app-shoe-item'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "standalone" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "imports" }), ": [", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "templateUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'./shoe-item.component.html'" }), ",\n ", _jsx(_components.span, { className: "hljs-comment", children: "// styleUrls: ['./shoe-item.component.css']" }), "\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), " {\n ", _jsx(_components.span, { className: "hljs-meta", children: "@Input" }), "() shoe!: ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Use definite assignment assertion or initialize" }), "\n}\n"] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/shoe-item/shoe-item.component.html" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["

\n"] }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "LayoutComponent" }), " to use the ", _jsx(_components.code, { children: "ShoeItemComponent" }), " in a grid."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/layout/layout.component.html (Section 2 for shoe list - updated)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["

{", _jsx(_components.span, { className: "hljs-comment", children: "/* Changed bg for contrast */" }), "}\n

", _jsx(_components.span, { className: "hljs-title class_", children: "Our" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Collection" }), "

\n"] }) }), "\n", _jsx(_components.h2, { children: "12. State Management with NgRx" }), "\n", _jsx(_components.p, { children: "Install NgRx packages." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["{\n ", _jsx(_components.span, { className: "hljs-string", children: "\"dependencies\"" }), ": {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// ... other dependencies" }), "\n ", _jsx(_components.span, { className: "hljs-string", children: "\"@ngrx/store\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"^19.0.0\"" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Use the latest appropriate version" }), "\n ", _jsx(_components.span, { className: "hljs-string", children: "\"@ngrx/effects\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"^19.0.0\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"@ngrx/entity\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"^19.0.0\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"@ngrx/store-devtools\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"^19.0.0\"" }), " ", _jsx(_components.span, { className: "hljs-comment", children: "// For development" }), "\n }\n}\n"] }) }), "\n", _jsxs(_components.p, { children: ["Run ", _jsx(_components.code, { children: "npm install" }), " to add these to your ", _jsx(_components.code, { children: "package.json" }), " and install them."] }), "\n", _jsx(_components.h3, { children: "Create NgRx Directory Structure" }), "\n", _jsx(_components.p, { children: "Bash" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-txt", children: "mkdir -p src/app/store/shoes\n" }) }), "\n", _jsx(_components.h3, { children: "Shoes Actions" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/store/shoes/shoes.actions.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createAction, props } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/store'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../../shoe.interface'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure path is correct" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "enum" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "GetShoes" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'[Shoes] Get Shoes'" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "GetShoesSuccess" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'[Shoes] Get Shoes Success'" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "GetShoesFailure" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'[Shoes] Get Shoes Failure'" }), ",\n\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoe" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'[Shoes] Add Shoe'" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeSuccess" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'[Shoes] Add Shoe Success'" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeFailure" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'[Shoes] Add Shoe Failure'" }), ",\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " getShoes = ", _jsx(_components.span, { className: "hljs-title function_", children: "createAction" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), ".", _jsx(_components.span, { className: "hljs-property", children: "GetShoes" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " getShoesSuccess = ", _jsx(_components.span, { className: "hljs-title function_", children: "createAction" }), "(\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), ".", _jsx(_components.span, { className: "hljs-property", children: "GetShoesSuccess" }), ",\n props<{ ", _jsx(_components.span, { className: "hljs-attr", children: "shoes" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[] }>()\n);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " getShoesFailure = ", _jsx(_components.span, { className: "hljs-title function_", children: "createAction" }), "(\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), ".", _jsx(_components.span, { className: "hljs-property", children: "GetShoesFailure" }), ",\n props<{ ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), " }>()\n);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " addShoe = ", _jsx(_components.span, { className: "hljs-title function_", children: "createAction" }), "(\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), ".", _jsx(_components.span, { className: "hljs-property", children: "AddShoe" }), ",\n props<{ ", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Omit" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), "> }>() ", _jsx(_components.span, { className: "hljs-comment", children: "// Consistent with service" }), "\n);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " addShoeSuccess = ", _jsx(_components.span, { className: "hljs-title function_", children: "createAction" }), "(\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), ".", _jsx(_components.span, { className: "hljs-property", children: "AddShoeSuccess" }), ",\n props<{ ", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " }>()\n);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " addShoeFailure = ", _jsx(_components.span, { className: "hljs-title function_", children: "createAction" }), "(\n ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActionTypes" }), ".", _jsx(_components.span, { className: "hljs-property", children: "AddShoeFailure" }), ",\n props<{ ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), " }>()\n);\n"] }) }), "\n", _jsx(_components.h3, { children: "Shoes Reducer" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/store/shoes/shoes.reducer.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createEntityAdapter, ", _jsx(_components.span, { className: "hljs-title class_", children: "EntityState" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/entity'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createReducer, on } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/store'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../../shoe.interface'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure path is correct" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " * ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./shoes.actions'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " shoesAdapter = createEntityAdapter<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ">({\n ", _jsx(_components.span, { className: "hljs-attr", children: "selectId" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" })] }), ") =>"] }), " shoe.", _jsx(_components.span, { className: "hljs-property", children: "id" }), "!, ", _jsx(_components.span, { className: "hljs-comment", children: "// Supabase ID is a string and should exist for entities" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "sortComparer" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "a, b" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " dateA = a.", _jsx(_components.span, { className: "hljs-property", children: "created_at" }), " ? ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Date" }), "(a.", _jsx(_components.span, { className: "hljs-property", children: "created_at" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "getTime" }), "() : ", _jsx(_components.span, { className: "hljs-number", children: "0" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " dateB = b.", _jsx(_components.span, { className: "hljs-property", children: "created_at" }), " ? ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Date" }), "(b.", _jsx(_components.span, { className: "hljs-property", children: "created_at" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "getTime" }), "() : ", _jsx(_components.span, { className: "hljs-number", children: "0" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " dateB - dateA; ", _jsx(_components.span, { className: "hljs-comment", children: "// descending order (newest first)" }), "\n },\n});\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEntityState" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "extends" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "EntityState" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "> {\n ", _jsx(_components.span, { className: "hljs-attr", children: "loaded" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "initialState" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEntityState" }), " = shoesAdapter.", _jsx(_components.span, { className: "hljs-title function_", children: "getInitialState" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "loaded" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n});\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " shoesReducer = ", _jsx(_components.span, { className: "hljs-title function_", children: "createReducer" }), "(\n initialState,\n ", _jsx(_components.span, { className: "hljs-title function_", children: "on" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "getShoes" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "state" }), " =>"] }), " ({\n ...state,\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "loaded" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n })),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "on" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "getShoesSuccess" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "state, { shoes }" }), ") =>"] }), "\n shoesAdapter.", _jsx(_components.span, { className: "hljs-title function_", children: "setAll" }), "(shoes, { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "loaded" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), " })\n ),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "on" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "getShoesFailure" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "state, { error }" }), ") =>"] }), " ({\n ...state,\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "loaded" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n error,\n })),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "on" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoe" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "state" }), " =>"] }), " ({\n ...state,\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Or a specific loading flag for adding" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n })),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "on" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoeSuccess" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "state, { shoe }" }), ") =>"] }), "\n shoesAdapter.", _jsx(_components.span, { className: "hljs-title function_", children: "addOne" }), "(shoe, { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), " })\n ),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "on" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoeFailure" }), ", ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "state, { error }" }), ") =>"] }), " ({\n ...state,\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ",\n error,\n }))\n);\n"] }) }), "\n", _jsx(_components.h3, { children: "Shoes Effects" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/store/shoes/shoes.effects.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Injectable" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Actions" }), ", createEffect, ofType } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/effects'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeService" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../../services/shoe.service'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure path is correct" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " * ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./shoes.actions'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { catchError, map, mergeMap, ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'rxjs'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-keyword", children: "of" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'rxjs'" }), ";\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Injectable" }), "()\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEffects" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["\n ", _jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "actions$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Actions" }), ",\n ", _jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoeService" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeService" }), "\n "] }), ") {}\n\n getShoes$ = ", _jsx(_components.span, { className: "hljs-title function_", children: "createEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), "\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "actions$" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "ofType" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "getShoes" }), "),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "mergeMap" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), "\n ", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeService" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getShoes" }), "()).", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "map" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "shoes" }), " =>"] }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getShoesSuccess" }), "({ shoes })),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "catchError" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "error" }), " =>"] }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "of" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getShoesFailure" }), "({ error })))\n )\n )\n )\n );\n\n addShoe$ = ", _jsx(_components.span, { className: "hljs-title function_", children: "createEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), "\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "actions$" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "ofType" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoe" }), "),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "mergeMap" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ shoe }" }), ") =>"] }), "\n ", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoeService" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "addShoe" }), "(shoe)).", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "map" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "newShoe" }), " =>"] }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "addShoeSuccess" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": newShoe })),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "catchError" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "error" }), " =>"] }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "of" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "addShoeFailure" }), "({ error })))\n )\n )\n )\n );\n}\n"] }) }), "\n", _jsx(_components.h3, { children: "Shoes Selectors" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/store/shoes/shoes.selectors.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createFeatureSelector, createSelector } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/store'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEntityState" }), ", shoesAdapter } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./shoes.reducer'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " selectShoesFeatureState = createFeatureSelector<", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEntityState" }), ">(", _jsx(_components.span, { className: "hljs-string", children: "'shoes'" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "selectAll" }), ": selectAllShoes,\n ", _jsx(_components.span, { className: "hljs-attr", children: "selectEntities" }), ": selectShoeEntities,\n ", _jsx(_components.span, { className: "hljs-attr", children: "selectIds" }), ": selectShoeIds,\n ", _jsx(_components.span, { className: "hljs-attr", children: "selectTotal" }), ": selectTotalShoes,\n} = shoesAdapter.", _jsx(_components.span, { className: "hljs-title function_", children: "getSelectors" }), "(selectShoesFeatureState);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " selectShoesLoading = ", _jsx(_components.span, { className: "hljs-title function_", children: "createSelector" }), "(selectShoesFeatureState, ", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "state" }), " =>"] }), " state.", _jsx(_components.span, { className: "hljs-property", children: "loading" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " selectShoesLoaded = ", _jsx(_components.span, { className: "hljs-title function_", children: "createSelector" }), "(selectShoesFeatureState, ", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "state" }), " =>"] }), " state.", _jsx(_components.span, { className: "hljs-property", children: "loaded" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " selectShoesError = ", _jsx(_components.span, { className: "hljs-title function_", children: "createSelector" }), "(selectShoesFeatureState, ", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "state" }), " =>"] }), " state.", _jsx(_components.span, { className: "hljs-property", children: "error" }), ");\n"] }) }), "\n", _jsx(_components.h3, { children: "Shoes Facade" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/store/shoes/shoes.facade.ts" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Injectable" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Store" }), ", select } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/store'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// select for pipeable operators" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'rxjs'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../../shoe.interface'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Ensure path is correct" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " * ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./shoes.actions'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " * ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesSelectors" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./shoes.selectors'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEntityState" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./shoes.reducer'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// For type safety with Store" }), "\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Injectable" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "providedIn" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'root'" }), ",\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesFacade" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoes$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[]> = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "store" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesSelectors" }), ".", _jsx(_components.span, { className: "hljs-property", children: "selectAllShoes" }), "));\n ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "loading$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), "> = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "store" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesSelectors" }), ".", _jsx(_components.span, { className: "hljs-property", children: "selectShoesLoading" }), ")\n );\n ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "loaded$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), "> = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "store" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesSelectors" }), ".", _jsx(_components.span, { className: "hljs-property", children: "selectShoesLoaded" }), "));\n ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "error$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), "> = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "store" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesSelectors" }), ".", _jsx(_components.span, { className: "hljs-property", children: "selectShoesError" }), "));\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "store" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Store" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEntityState" }), ">"] }), ") {} ", _jsx(_components.span, { className: "hljs-comment", children: "// Use specific state slice type" }), "\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "getShoes" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "store" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getShoes" }), "());\n }\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "addShoe" }), "(", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Omit" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), ">): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "store" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesActions" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "addShoe" }), "({ shoe }));\n }\n}\n"] }) }), "\n", _jsx(_components.h3, { children: "Configure Store in Application" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "src/app/app.config.ts" }), " (for standalone applications)"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ApplicationConfig" }), ", isDevMode, provideZoneChangeDetection } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { provideRouter } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/router'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { provideStore } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/store'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { provideEffects } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/effects'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { provideStoreDevtools } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@ngrx/store-devtools'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { routes } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./app.routes'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { shoesReducer } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./store/shoes/shoes.reducer'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEffects" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./store/shoes/shoes.effects'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "appConfig" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "ApplicationConfig" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "providers" }), ": [\n ", _jsx(_components.span, { className: "hljs-title function_", children: "provideZoneChangeDetection" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "eventCoalescing" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), " }),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "provideRouter" }), "(routes),\n ", _jsx(_components.span, { className: "hljs-title function_", children: "provideStore" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "shoes" }), ": shoesReducer }), ", _jsx(_components.span, { className: "hljs-comment", children: "// Add 'shoes' state slice" }), "\n ", _jsx(_components.span, { className: "hljs-title function_", children: "provideEffects" }), "([", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesEffects" }), "]), ", _jsx(_components.span, { className: "hljs-comment", children: "// Register effects" }), "\n ", _jsx(_components.span, { className: "hljs-title function_", children: "provideStoreDevtools" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "maxAge" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "25" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Retains last 25 states" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "logOnly" }), ": !", _jsx(_components.span, { className: "hljs-title function_", children: "isDevMode" }), "(), ", _jsx(_components.span, { className: "hljs-comment", children: "// Restrict extension to log-only mode in production" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "autoPause" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Pauses recording actions and state changes when the extension window is not open" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "trace" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// If true, will include stack trace for every dispatched action, so use wisely" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "traceLimit" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "75" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// Maximum stack trace frames to be stored (in case trace is true)" }), "\n }),\n ],\n};\n"] }) }), "\n", _jsxs(_components.p, { children: ["If you are using an ", _jsx(_components.code, { children: "NgModule" }), " based approach, you would configure this in your ", _jsx(_components.code, { children: "AppModule" }), "."] }), "\n", _jsx(_components.h2, { children: "13. Update LayoutComponent to Use NgRx Facade" }), "\n", _jsxs(_components.p, { children: ["Refactor ", _jsx(_components.code, { children: "LayoutComponent" }), " to use the ", _jsx(_components.code, { children: "ShoesFacade" }), " for state management."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "src/app/layout/layout.component.ts (NgRx Version)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Component" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "OnInit" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "OnDestroy" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ViewChild" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/core'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@angular/common'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Subject" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'rxjs'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { takeUntil } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'rxjs/operators'" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe.interface'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesFacade" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../store/shoes/shoes.facade'" }), "; ", _jsx(_components.span, { className: "hljs-comment", children: "// Correct path" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../add-shoe-modal/add-shoe-modal.component'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'../shoe-item/shoe-item.component'" }), ";\n\n", _jsx(_components.span, { className: "hljs-meta", children: "@Component" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "selector" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'app-layout'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "standalone" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "imports" }), ": [", _jsx(_components.span, { className: "hljs-title class_", children: "CommonModule" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoeItemComponent" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "templateUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'./layout.component.html'" }), ",\n})\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "class" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "LayoutComponent" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "implements" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "OnInit" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "OnDestroy" }), " {\n ", _jsx(_components.span, { className: "hljs-meta", children: "@ViewChild" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'addShoeModal'" }), ") addShoeModal!: ", _jsx(_components.span, { className: "hljs-title class_", children: "AddShoeModalComponent" }), ";\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoes$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[]>;\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "loading$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), ">;\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "error$" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Observable" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), ">;\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// For local state, if needed, or directly use async pipe for shoes$" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoes" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), "[] = []; ", _jsx(_components.span, { className: "hljs-comment", children: "// This can be removed if using async pipe exclusively for shoes" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "private" }), " destroy$ = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Subject" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), ">();\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "constructor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-keyword", children: "private" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "readonly" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "shoesFacade" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "ShoesFacade" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes$" }), " = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoesFacade" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes$" }), ";\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "loading$" }), " = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoesFacade" }), ".", _jsx(_components.span, { className: "hljs-property", children: "loading$" }), ";\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "error$" }), " = ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoesFacade" }), ".", _jsx(_components.span, { className: "hljs-property", children: "error$" }), ";\n }\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "ngOnInit" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoesFacade" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getShoes" }), "(); ", _jsx(_components.span, { className: "hljs-comment", children: "// Dispatch action to load shoes" }), "\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Subscribe to the facade's shoes observable if you need the data in the component logic" }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Otherwise, prefer using the async pipe in the template" }), "\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes$" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "takeUntil" }), "(", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "destroy$" }), ")).", _jsx(_components.span, { className: "hljs-title function_", children: "subscribe" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "shoes" }), " =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoes" }), " = shoes; ", _jsx(_components.span, { className: "hljs-comment", children: "// Update local copy for template if not using async pipe there for the list" }), "\n });\n\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "error$" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "pipe" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "takeUntil" }), "(", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "destroy$" }), ")).", _jsx(_components.span, { className: "hljs-title function_", children: "subscribe" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "error" }), " =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'An error occurred with shoes state:'" }), ", error);\n });\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handleAddShoe" }), "(", _jsx(_components.span, { className: "hljs-attr", children: "shoe" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Omit" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "Shoe" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), ">): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "shoesFacade" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "addShoe" }), "(shoe);\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Modal should close itself on successful submission via its own logic" }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "openAddShoeModal" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoeModal" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "show" }), "();\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "public" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "closeAddShoeModal" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "addShoeModal" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "hide" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "); ", _jsx(_components.span, { className: "hljs-comment", children: "// Assuming false prevents unnecessary event emission" }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "ngOnDestroy" }), "(): ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "destroy$" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "next" }), "();\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "this" }), ".", _jsx(_components.span, { className: "hljs-property", children: "destroy$" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "complete" }), "();\n }\n}\n"] }) }), "\n", _jsxs(_components.p, { children: ["You can also use the ", _jsx(_components.code, { children: "async" }), " pipe in your template to directly subscribe to ", _jsx(_components.code, { children: "shoes$" }), ", ", _jsx(_components.code, { children: "loading$" }), ", etc., which can simplify the component's TypeScript code by managing subscriptions automatically."] }), "\n", _jsxs(_components.p, { children: ["Example using ", _jsx(_components.code, { children: "async" }), " pipe in ", _jsx(_components.code, { children: "layout.component.html" }), " for the shoe list:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: ["

\n"] }) }), "\n", _jsx(_components.p, { children: "This completes the setup and integration of Angular with Tailwind CSS, Supabase, and NgRx for a basic shoe shop application. You can now expand on this foundation with more features like updating, deleting shoes, user authentication, shopping cart, etc." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Phone:

098-670-7870

Email:

howl@kornchanok.dev