Angular Hotel Search Widget

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

📦 Installation

``bash
npm install angular-hotel-search-widget primeng primeicons
`

Package: angular-hotel-search-widget on npm

Quick Start

`bash


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

`

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

@Component({
selector: 'app-root',
standalone: true,
imports: [HotelSearchWidgetComponent],
template:


})
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:

`bash
npm install angular-hotel-search-widget primeng primeicons
`

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

Usage

$3

Install the widget and its peer dependencies:

`bash
npm install angular-hotel-search-widget primeng primeicons
`

$3

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

#### For Standalone Applications

In your main.ts:

`typescript
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:

`typescript
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 {}
`

$3

#### Standalone Component Example

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

@Component({
selector: 'app-root',
standalone: true,
imports: [HotelSearchWidgetComponent],
template:


})
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:

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

@Component({
selector: 'app-hotel-search',
template:
[config]="widgetConfig"
[minWidth]="1240"
>

})
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:

`typescript
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 {}
`

$3

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

`scss
// 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:

`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

$3

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

$3

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

$3

`typescript
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
};
`

$3

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

Troubleshooting

$3

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:
`bash
npm run build
`

2. Then install/link it in your project:

Option A: Using npm link (Recommended for local development)
`bash
# 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
`bash
# In your Angular project directory
npm install "C:\Arfat Khan\ang_widget\dist\angular-hotel-search-widget"
`

Option C: Install from relative path
`bash
# 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

$3

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

$3

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

$3

- 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

$3

- 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:
`bash
npm run build
`

2. Login to npm (if not already):
`bash
npm login
`

3. Publish the package:
`bash
npm publish
`

The prepublishOnly script will automatically build the library before publishing.

4. For scoped packages or private registry:
`bash
npm publish --access public # for scoped packages
`

Development

`bash


Install dependencies

npm install

Run demo app

npm run serve

Build library

npm run build
``

License

MIT