Angular 19 Resource API - Search Autocomplete with SSR

This project demonstrates how to implement a search autocomplete feature using the Angular 19 Resource API with Server-Side Rendering (SSR). The application showcases real-time search functionality with a clean and efficient design.

Features

• Search Autocomplete: Provides suggestions based on user input in real-time.
• Angular 19 Resource API: Utilizes the latest features of Angular 19 for efficient data fetching.
• Resource API: Fully reactive coding.
• Server-Side Rendering (SSR): Enhances performance and SEO by rendering pages on the server.
• Responsive Design: Fully optimized for desktop and mobile devices.

Prerequisites

Before running the application, ensure you have the following installed:

• Node.js (version 18 or later)
• Angular CLI (version 18 or later)
• npm or yarn package manager

Getting Started

1. Clone the Repository

git clone https://github.com/akash-pandey1/angular-19-resource-api-search-autocomplete.git
cd app-nine

2. Install Dependencies

npm install

3. Run the Application

Development Mode

npm run start

Open your browser and navigate to http://localhost:4200 to view the app.

Production Mode with SSR

npm run build
npm run serve

Open your browser and navigate to http://localhost:4000 to view the SSR-enabled app.

Project Structure

src/
├── app/
│   ├── app.component.ts
├── main.ts
├── server.ts

Key Components

• SearchBarComponent: Handles user input and displays the search bar.
• AutocompleteDropdownComponent: Displays suggestions fetched from the Resource API.
• ResourceApiService: Manages communication with the backend API.

Configuration

How It Works

1. User inputs a query in the search bar.
2. The ResourceApi sends a request to the backend using the Angular Resource API.
3. Suggestions are fetched and displayed in the AutocompleteDropdownComponent.
4. Server-Side Rendering (SSR) ensures optimal performance and SEO benefits.

Technologies Used

• Angular 19
• SSR
• Angular Resource API
• TypeScript
• HTML5/SCSS

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Feel free to fork the repository and submit a pull request.

1. Fork the repository
2. Create a new branch: git checkout -b feature-name
3. Commit your changes: git commit -m 'Add new feature'
4. Push to the branch: git push origin feature-name
5. Open a pull request

Acknowledgments

• Angular Team for the Resource API
• Community contributors for inspiring the project

Contact

For any questions or support, please contact [akashdeep9226@gmail.com].