CustomDirectives

This project is part of the Udemy course 30 Days of Angular: Build 30 Web Projects with Angular.

Overview

This Angular project demonstrates the creation and usage of custom directives. Directives are a core feature of Angular, allowing you to extend HTML with custom behavior and reusable logic. The project includes several example directives, such as:

• click-outside.directive.ts: Detects clicks outside a specified element.
• focus-on.directive.ts: Automatically focuses an element when a condition is met.
• hover-lighlight.directive.ts: Highlights an element on hover.
• text-transform.directive.ts: Transforms the text content of an element (e.g., uppercase, lowercase).

These examples are designed to help you understand how to build and apply custom directives in real-world Angular applications.

Getting Started

Prerequisites

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

Installation

1. Clone this repository or download the source code.
2. Install dependencies:

   npm install

Development Server

To start a local development server, run:

ng serve

Open your browser at http://localhost:4200/. The app will reload automatically if you change any source files.

Building

To build the project for production:

ng build

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

Running Unit Tests

To execute unit tests via Karma:

ng test

Running End-to-End Tests

To run end-to-end (e2e) tests:

ng e2e

Note: Angular CLI does not include an e2e framework by default. You can add one as needed.

Learning Outcomes

• Understand the basics of Angular directives
• Learn how to create attribute directives
• Apply custom behavior to DOM elements
• Practice best practices for reusable Angular code

Resources

• Angular Directives Documentation
• Angular CLI Overview and Command Reference
• 30 Days of Angular Udemy Course

---

Happy coding!