[FEATURE]: Angular search app

README.md

@@ -8,9 +8,11 @@ This is a monorepo containing multiple standalone projects. Each project lives i
 
 ```plaintext
 code-samples/
+├── typesense-angular-search-bar/         # Angular + Typesense search implementation
 ├── typesense-astro-search/              # Astro + Typesense search implementation
 ├── typesense-gin-full-text-search/      # Go (Gin) + Typesense backend implementation
 ├── typesense-next-search-bar/           # Next.js + Typesense search implementation
+├── typesense-nuxt-search-bar/           # Nuxt.js + Typesense search implementation
 ├── typesense-qwik-js-search/            # Qwik + Typesense search implementation
 ├── typesense-react-native-search-bar/   # React Native + Typesense search implementation
 ├── typesense-solid-js-search/           # SolidJS + Typesense search implementation
@@ -22,9 +24,11 @@ code-samples/
 
 | Project                                                                      | Framework     | Description                                                     |
 | ---------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------- |
+| [typesense-angular-search-bar](./typesense-angular-search-bar)               | Angular       | A modern search bar with instant search capabilities            |
 | [typesense-astro-search](./typesense-astro-search)                           | Astro         | A modern search bar with instant search capabilities            |
 | [typesense-gin-full-text-search](./typesense-gin-full-text-search)           | Go (Gin)      | Backend API with full-text search using Typesense               |
 | [typesense-next-search-bar](./typesense-next-search-bar)                     | Next.js       | A modern search bar with instant search capabilities            |
+| [typesense-nuxt-search-bar](./typesense-nuxt-search-bar)                     | Nuxt.js       | A modern search bar with instant search capabilities            |
 | [typesense-qwik-js-search](./typesense-qwik-js-search)                       | Qwik          | Resumable search bar with real-time search and modern UI        |
 | [typesense-react-native-search-bar](./typesense-react-native-search-bar)     | React Native  | A mobile search bar with instant search capabilities            |
 | [typesense-solid-js-search](./typesense-solid-js-search)                     | SolidJS       | A modern search bar with instant search capabilities            |

typesense-angular-search-bar/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

typesense-angular-search-bar/.gitignore

@@ -0,0 +1,45 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Environment config (contains API keys)
+/src/environments/environment.ts
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

typesense-angular-search-bar/README.md

@@ -0,0 +1,95 @@
+# Angular Search Bar with Typesense
+
+A modern search bar application built with Angular and Typesense, featuring instant search capabilities.
+
+## Tech Stack
+
+- Angular 18 (LTS)
+- Typesense
+- typesense-instantsearch-adapter & instantsearch.js
+
+## Prerequisites
+
+- Node.js 18+ and npm 9+.
+- Docker (for running Typesense locally). Alternatively, you can use a Typesense Cloud cluster.
+- Basic knowledge of Angular.
+
+## Quick Start
+
+### 1. Clone the repository
+
+```bash
+git clone https://github.com/typesense/code-samples.git
+cd typesense-angular-search-bar
+```
+
+### 2. Install dependencies
+
+```bash
+npm install
+```
+
+### 3. Set up environment variables
+
+Copy the example environment file and fill in your Typesense connection details:
+
+```bash
+cp src/environments/environment.example.ts src/environments/environment.ts
+```
+
+Then edit `src/environments/environment.ts`:
+
+```typescript
+export const environment = {
+  typesense: {
+    apiKey: 'your-api-key',
+    host: 'localhost',
+    port: 8108,
+    protocol: 'http',
+    index: 'books',
+  },
+};
+```
+
+### 4. Project Structure
+
+```text
+src/app/
+├── components/
+│   ├── heading/          # App title and branding
+│   ├── search-bar/       # Search input
+│   ├── book-list/        # Results grid
+│   └── book-card/        # Individual book display
+├── lib/
+│   └── instantsearch-adapter.ts   # Typesense adapter config
+├── services/
+│   └── search.service.ts # InstantSearch singleton
+├── types/
+│   └── book.ts           # Book type definition
+├── app.component.*       # Root component
+└── app.config.ts         # Angular app configuration
+```
+
+### 5. Start the development server
+
+```bash
+npm start
+```
+
+Open [http://localhost:4200](http://localhost:4200) in your browser.
+
+### 6. Deployment
+
+Update `src/environments/environment.ts` to point to your Typesense Cloud cluster:
+
+```typescript
+export const environment = {
+  typesense: {
+    apiKey: 'your-search-only-api-key',
+    host: 'xxx.typesense.net',
+    port: 443,
+    protocol: 'https',
+    index: 'books',
+  },
+};
+```

typesense-angular-search-bar/angular.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "typesense-angular-search-bar": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:component": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/typesense-angular-search-bar",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "algoliasearch-helper",
+              "@algolia/events",
+              "typesense",
+              "qs"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "typesense-angular-search-bar:build:production"
+            },
+            "development": {
+              "buildTarget": "typesense-angular-search-bar:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

typesense-angular-search-bar/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "typesense-angular-search-bar",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^18.2.0",
+    "@angular/common": "^18.2.0",
+    "@angular/compiler": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/forms": "^18.2.0",
+    "@angular/platform-browser": "^18.2.0",
+    "@angular/platform-browser-dynamic": "^18.2.0",
+    "@angular/router": "^18.2.0",
+    "algoliasearch": "^5.50.1",
+    "instantsearch.js": "^4.93.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "typesense": "^3.0.5",
+    "typesense-instantsearch-adapter": "^3.0.2",
+    "zone.js": "~0.14.10"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.2.21",
+    "@angular/cli": "^18.2.21",
+    "@angular/compiler-cli": "^18.2.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.5.2"
+  }
+}

typesense-angular-search-bar/src/app/app.component.css

@@ -0,0 +1,11 @@
+.app-container {
+  min-height: 100vh;
+  background-color: #f9fafb;
+  padding: 2rem 1rem;
+}
+
+ais-instantsearch {
+  display: block;
+  max-width: 80rem;
+  margin: 0 auto;
+}

typesense-angular-search-bar/src/app/app.component.html

@@ -0,0 +1,5 @@
+<div class="app-container">
+  <app-heading />
+  <app-search-bar />
+  <app-book-list />
+</div>

typesense-angular-search-bar/src/app/app.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeadingComponent } from './components/heading/heading.component';
+import { SearchBarComponent } from './components/search-bar/search-bar.component';
+import { BookListComponent } from './components/book-list/book-list.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [HeadingComponent, SearchBarComponent, BookListComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+})
+export class AppComponent {}

typesense-angular-search-bar/src/app/app.config.ts

@@ -0,0 +1,5 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true })],
+};