Angular Hotel Search Widget

An Angular 20+ component for hotel search functionality, converted from Vue.js.

📦 Installation

npm install angular-hotel-search-widget primeng primeicons

Package: angular-hotel-search-widget on npm

Quick Start

# 1. Install the package and dependencies
npm install angular-hotel-search-widget primeng primeicons

# 2. Configure PrimeNG in your main.ts (see Usage section below)

# 3. Import and use the component

import { Component } from '@angular/core';
import { HotelSearchWidgetComponent } from 'angular-hotel-search-widget';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HotelSearchWidgetComponent],
  template: `
    <lib-hotel-search-widget [config]="config"></lib-hotel-search-widget>
  `
})
export class MyComponent {
  config = { 
    theme: { 
      primary: '#1c6bff',
      secondary: '#00b3a4',
      primaryLight: '#e3f0ff'
    } 
  };
}

Note: If you're developing/testing the library locally before publishing, make sure to build it first with npm run build in the library directory, or use npm link for local development.

Installation

The package is available on npm. Install it along with its peer dependencies:

npm install angular-hotel-search-widget primeng primeicons

Note: Make sure you have Angular 20+ installed in your project.

Usage

Step 1: Install Dependencies

Install the widget and its peer dependencies:

npm install angular-hotel-search-widget primeng primeicons

Step 2: Configure PrimeNG

The widget requires PrimeNG to be configured in your Angular application.

For Standalone Applications

In your main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    providePrimeNG({
      theme: {
        preset: Aura
      }
    })
  ]
});

For NgModule Applications

In your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [
    providePrimeNG({
      theme: {
        preset: Aura
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Import and Use the Component

Standalone Component Example

import { Component } from '@angular/core';
import { HotelSearchWidgetComponent } from 'angular-hotel-search-widget';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HotelSearchWidgetComponent],
  template: `
    <div class="container">
      <lib-hotel-search-widget
        [config]="widgetConfig"
        [minWidth]="1240"
      ></lib-hotel-search-widget>
    </div>
  `
})
export class AppComponent {
  widgetConfig = {
    theme: {
      primary: '#1c6bff',
      secondary: '#00b3a4',
      primaryLight: '#e3f0ff'
    },
    redirectionDomain: 'phoenix.dev.futuretravelplatform.com',
    fontName: 'Montserrat, Segoe UI, system-ui, sans-serif'
  };
}

NgModule Example

In your component:

import { Component } from '@angular/core';
import { HotelSearchWidgetComponent } from 'angular-hotel-search-widget';

@Component({
  selector: 'app-hotel-search',
  template: `
    <lib-hotel-search-widget
      [config]="widgetConfig"
      [minWidth]="1240"
    ></lib-hotel-search-widget>
  `
})
export class HotelSearchComponent {
  widgetConfig = {
    theme: {
      primary: '#1c6bff',
      secondary: '#00b3a4',
      primaryLight: '#e3f0ff'
    },
    redirectionDomain: 'phoenix.dev.futuretravelplatform.com',
    fontName: 'Montserrat, Segoe UI, system-ui, sans-serif'
  };
}

In your module:

import { NgModule } from '@angular/core';
import { HotelSearchWidgetComponent } from 'angular-hotel-search-widget';
import { HotelSearchComponent } from './hotel-search.component';

@NgModule({
  declarations: [HotelSearchComponent],
  imports: [HotelSearchWidgetComponent],
  exports: [HotelSearchComponent]
})
export class HotelSearchModule {}

Step 4: Add PrimeNG Styles (Optional but Recommended)

Add PrimeNG styles to your styles.scss or angular.json:

// In styles.scss
@import "primeng/resources/themes/aura-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

Or in angular.json:

"styles": [
  "node_modules/primeng/resources/themes/aura-light-blue/theme.css",
  "node_modules/primeng/resources/primeng.css",
  "node_modules/primeicons/primeicons.css",
  "src/styles.scss"
]

Props

config (Object, optional)

Configuration object for the widget:

• theme (Object, optional):
  • primary (String): Primary color (default: #2c0a82)
  • secondary (String): Secondary color (default: #2c0a82)
  • primaryLight (String): Primary light color (default: #f3e2ff)
• redirectionDomain (String, optional): Domain for search redirection
• fontName (String, optional): Custom font family

minWidth (Number | String, optional)

Minimum width of the widget container.

Features

• ✅ Destination search with autocomplete
• ✅ Nationality selection
• ✅ Date range picker (check-in/check-out)
• ✅ Rooms and guests selection
• ✅ Advanced search options (star ratings, meal types)
• ✅ Around current location feature
• ✅ Fully customizable theme
• ✅ Responsive design
• ✅ Angular 20+ with Signals

Requirements

• Angular: 20.0.0 or higher
• Node.js: 20.19.0+ or 22.12.0+
• PrimeNG: 20.4.0 or higher
• PrimeIcons: 7.0.0 or higher

Configuration Options

Complete Config Example

const widgetConfig = {
  theme: {
    primary: '#1c6bff',        // Primary brand color
    secondary: '#00b3a4',      // Secondary brand color
    primaryLight: '#e3f0ff'    // Light variant for backgrounds
  },
  redirectionDomain: 'your-domain.com',  // Domain for search redirects
  fontName: 'Montserrat, Segoe UI, system-ui, sans-serif'  // Custom font
};

Minimal Config Example

// All config options are optional
const widgetConfig = {};  // Uses default theme colors

Troubleshooting

Import not working / "Cannot find module 'angular-hotel-search-widget'"

Quick Fix for TypeScript Error (ts2307):

If you're getting Cannot find module 'angular-hotel-search-widget' or its corresponding type declarations:

1. First, build the library:

   npm run build

2. Then install/link it in your project:

   Option A: Using npm link (Recommended for local development)

   # In the library directory (ang_widget)
   npm link
      
   # In your Angular project directory
   npm link angular-hotel-search-widget

   Option B: Install from local dist folder

   # In your Angular project directory
   npm install "C:\Arfat Khan\ang_widget\dist\angular-hotel-search-widget"

   Option C: Install from relative path

   # If your project is in a sibling directory
   npm install ../ang_widget/dist/angular-hotel-search-widget

3. Restart your TypeScript server:

   • In VS Code: Press Ctrl+Shift+P → "TypeScript: Restart TS Server"
   • Or restart your IDE

If you're using the published package:

1. Make sure the package is installed: npm install angular-hotel-search-widget
2. Verify the import path is correct: import { HotelSearchWidgetComponent } from 'angular-hotel-search-widget';
3. Restart your TypeScript server/IDE
4. Check that node_modules/angular-hotel-search-widget exists

If TypeScript still can't find the types:

• Make sure the package is built: npm run build
• Check that dist/angular-hotel-search-widget/index.d.ts exists
• Verify the built dist/angular-hotel-search-widget/package.json has "types": "./index.d.ts" in exports

Component not displaying

1. Check PrimeNG configuration: Ensure providePrimeNG() is configured in your app providers
2. Check animations: Make sure provideAnimations() or BrowserAnimationsModule is imported
3. Check styles: Verify PrimeNG CSS files are imported

Styles not applying

• Ensure PrimeNG theme CSS is imported in your styles.scss or angular.json
• Check that primeicons CSS is also imported

Build errors

• Verify you're using Angular 20+ and Node.js 20.19.0+ or 22.12.0+
• Ensure all peer dependencies are installed: npm install primeng@^20.4.0 primeicons@^7.0.0

TypeScript errors

• Make sure you have @angular/common, @angular/core, and @angular/forms installed (peer dependencies)

Publishing to npm

If you want to publish this package to npm:

1. Build the library:

   npm run build

2. Login to npm (if not already):

   npm login

3. Publish the package:

   npm publish

   The prepublishOnly script will automatically build the library before publishing.

4. For scoped packages or private registry:

   npm publish --access public  # for scoped packages

Development

# Install dependencies
npm install

# Run demo app
npm run serve

# Build library
npm run build

License

MIT