DynamicFilterList

DynamicFilterList is a simple Angular application that demonstrates how to build a dynamic, filterable list using Angular pipes and components. This project is part of the Udemy course 30 Days of Angular: Build 30 Web Projects with Angular.

Project Overview

The application allows users to filter a list of items in real-time as they type, showcasing Angular's powerful data binding and custom pipe features. This project is ideal for beginners looking to understand the basics of Angular, including component structure, data binding, and creating custom pipes.

Features

• Real-time filtering of a list based on user input
• Custom Angular pipe for filtering logic
• Responsive and clean UI
• Modular Angular component structure

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• Angular CLI

Installation

1. Clone the repository:

   git clone https://github.com/MuhammadAlifBudiman/dynamic-filter-list.git
   cd dynamic-filter-list

2. Install dependencies:

   npm install

Running the Development Server

Start the local development server:

ng serve

Open your browser at http://localhost:4200 to view the app. The application will reload automatically when you modify source files.

Building the Project

To build the project for production:

ng build

The build artifacts will be stored in the dist/ directory.

Running Tests

To execute unit tests:

ng test

Project Structure

• src/app/app.component.ts – Main application component
• src/app/filter.pipe.ts – Custom pipe for filtering the list
• src/app/app.component.html – Application template
• src/app/app.component.scss – Application styles

About the Course

This project is part of the Udemy course 30 Days of Angular: Build 30 Web Projects with Angular. The course guides you through building 30 different Angular projects, helping you master Angular by practice.

License

This project is for educational purposes as part of the Udemy course. Please refer to the course for licensing details.