Angular Common Module Creation Challenge

This challenge focuses on a fundamental concept in Angular development: creating and utilizing shared modules. Shared modules are crucial for organizing your application, promoting reusability, and improving maintainability by grouping common components, directives, and pipes. You will create a CommonModule that will house a set of reusable UI elements.

Problem Description

Your task is to create a new Angular module named CommonModule. This module should be designed to hold and export common UI components, directives, and pipes that can be shared across various feature modules within an Angular application.

Key Requirements:

1. Module Creation: Create a new Angular module file (e.g., common.module.ts).
2. Component Inclusion: Include at least one custom component within this module. For this challenge, create a simple HighlightDirective that changes the background color of an element when hovered over.
3. Exporting Declarations: Ensure that any components, directives, or pipes declared within CommonModule are also exported, making them available for use in other modules.
4. Importing Angular Modules: Import necessary Angular modules (like CommonModule from @angular/common for directives like ngIf, ngFor, etc.) into your CommonModule so its declared/exported items can leverage them.
5. Usage in Another Module: Demonstrate how to import and use the CommonModule and its exported HighlightDirective in another module (e.g., a FeatureModule).

Expected Behavior:

• The CommonModule should be importable into other Angular modules.
• Any component, directive, or pipe declared in CommonModule and subsequently exported should be usable in any module that imports CommonModule.
• The HighlightDirective should function as expected, changing the background color of an element on hover.

Edge Cases:

• Consider what happens if a component/directive is declared but not exported from CommonModule. (It should not be usable by importing modules).
• Ensure that Angular's built-in directives (like *ngIf, *ngFor) are available for use within components declared in CommonModule by correctly importing CommonModule from @angular/common.

Examples

Example 1: HighlightDirective Implementation

// src/app/common/directives/highlight.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]' // Attribute selector
})
export class HighlightDirective {
  @Input('appHighlight') highlightColor: string = 'yellow'; // Default color
  private originalColor: string = '';

  constructor(private el: ElementRef) {
    this.originalColor = this.el.nativeElement.style.backgroundColor || '';
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = this.originalColor;
  }
}

Example 2: CommonModule Structure

// src/app/common/common.module.ts
import { NgModule } from '@angular/core';
import { CommonModule as NgCommonModule } from '@angular/common'; // Alias to avoid conflict
import { HighlightDirective } from './directives/highlight.directive';

@NgModule({
  declarations: [
    HighlightDirective
  ],
  imports: [
    NgCommonModule // Import Angular's CommonModule for built-in directives
  ],
  exports: [
    HighlightDirective,
    NgCommonModule // Re-export Angular's CommonModule if needed by consumers
  ]
})
export class CommonModule { }

Example 3: Usage in a Feature Module

// src/app/feature/feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // Standard Angular CommonModule
import { CommonModule as AppCommonModule } from '../common/common.module'; // Import our custom CommonModule
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [
    FeatureComponent
  ],
  imports: [
    CommonModule,
    AppCommonModule // Import our shared CommonModule
  ],
  exports: [
    FeatureComponent
  ]
})
export class FeatureModule { }

// src/app/feature/feature.component.html
<p appHighlight="lightblue">This text should have a light blue background on hover.</p>

Constraints

• You must use TypeScript for all code.
• The CommonModule should be a standalone module and not part of any other feature module initially.
• The HighlightDirective should accept an optional input for the highlight color.
• The solution should be structured in a typical Angular project file layout (e.g., src/app/common/...).

Notes

• Think about the difference between declarations, imports, and exports in an Angular module.
• Consider why it's important to re-export CommonModule from @angular/common if its consumers will need access to directives like *ngIf.
• The goal is to demonstrate modularity and reusability, so focus on clear separation of concerns.