Component System & Decorators

/**
 * Decorator that marks a class as an Angular component
 * @param config - Component configuration object
 * @returns TypeDecorator function
 */
@Component(config: {
  selector?: string;
  template?: string;
  templateUrl?: string;
  styles?: string[];
  styleUrls?: string[];
  encapsulation?: ViewEncapsulation;
  changeDetection?: ChangeDetectionStrategy;
  providers?: Provider[];
  standalone?: boolean;
  imports?: (Type<any> | any[])[];
  hostDirectives?: HostDirectiveConfig[];
}): TypeDecorator;

/**
 * Decorator that marks a class as an Angular directive
 * @param config - Directive configuration object
 * @returns TypeDecorator function
 */
@Directive(config: {
  selector?: string;
  providers?: Provider[];
  standalone?: boolean;
  hostDirectives?: HostDirectiveConfig[];
}): TypeDecorator;

/**
 * Decorator that marks a class as an Angular pipe
 * @param config - Pipe configuration object
 * @returns TypeDecorator function
 */
@Pipe(config: {
  name: string;
  pure?: boolean;
  standalone?: boolean;
}): TypeDecorator;

/**
 * Decorator that marks a class as an Angular module
 * @param config - Module configuration object
 * @returns TypeDecorator function
 */
@NgModule(config: {
  declarations?: (Type<any> | any[])[];
  imports?: (Type<any> | ModuleWithProviders | any[])[];
  exports?: (Type<any> | any[])[];
  providers?: Provider[];
  bootstrap?: (Type<any> | any[])[];
  schemas?: (SchemaMetadata | any[])[];
}): TypeDecorator;

/**
 * Decorator that marks a class as available for dependency injection
 * @param config - Injectable configuration object
 * @returns TypeDecorator function
 */
@Injectable(config?: {
  providedIn?: Type<any> | 'root' | 'platform' | 'any';
}): TypeDecorator;

/**
 * Decorator that marks a property as an input property
 * @param bindingPropertyName - Optional custom binding property name
 * @returns PropertyDecorator function
 */
@Input(bindingPropertyName?: string): PropertyDecorator;

/**
 * Decorator that marks a property as an output property (EventEmitter)
 * @param bindingPropertyName - Optional custom binding property name
 * @returns PropertyDecorator function
 */
@Output(bindingPropertyName?: string): PropertyDecorator;

/**
 * Decorator that binds a host element property to a directive/component property
 * @param hostPropertyName - Name of the host property to bind
 * @returns PropertyDecorator function
 */
@HostBinding(hostPropertyName?: string): PropertyDecorator;

/**
 * Decorator that declares a DOM event to listen for and provides a handler method
 * @param eventName - The DOM event to listen for
 * @param args - Arguments to pass to the handler method
 * @returns PropertyDecorator function
 */
@HostListener(eventName: string, args?: string[]): PropertyDecorator;

/**
 * Decorator that configures a view query
 * @param selector - Directive type or name to query for
 * @param options - Query options
 * @returns PropertyDecorator function
 */
@ViewChild(selector: ProviderToken<any> | string, options?: {
  read?: any;
  static?: boolean;
}): PropertyDecorator;

/**
 * Decorator that configures a view query for multiple results
 * @param selector - Directive type or name to query for
 * @param options - Query options
 * @returns PropertyDecorator function
 */
@ViewChildren(selector: ProviderToken<any> | string, options?: {
  read?: any;
}): PropertyDecorator;

/**
 * Decorator that configures a content query
 * @param selector - Directive type or name to query for
 * @param options - Query options
 * @returns PropertyDecorator function
 */
@ContentChild(selector: ProviderToken<any> | string, options?: {
  read?: any;
  static?: boolean;
}): PropertyDecorator;

/**
 * Decorator that configures a content query for multiple results
 * @param selector - Directive type or name to query for
 * @param options - Query options
 * @returns PropertyDecorator function
 */
@ContentChildren(selector: ProviderToken<any> | string, options?: {
  read?: any;
  descendants?: boolean;
}): PropertyDecorator;

/**
 * Lifecycle hook called after data-bound properties are initialized
 */
interface OnInit {
  ngOnInit(): void;
}

/**
 * Lifecycle hook called when data-bound input properties change
 */
interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void;
}

/**
 * Lifecycle hook for custom change detection
 */
interface DoCheck {
  ngDoCheck(): void;
}

/**
 * Lifecycle hook called after content is initialized
 */
interface AfterContentInit {
  ngAfterContentInit(): void;
}

/**
 * Lifecycle hook called after content is checked
 */
interface AfterContentChecked {
  ngAfterContentChecked(): void;
}

/**
 * Lifecycle hook called after view is initialized
 */
interface AfterViewInit {
  ngAfterViewInit(): void;
}

/**
 * Lifecycle hook called after view is checked
 */
interface AfterViewChecked {
  ngAfterViewChecked(): void;
}

/**
 * Lifecycle hook called before directive/component is destroyed
 */
interface OnDestroy {
  ngOnDestroy(): void;
}

/**
 * Defines template and style encapsulation options
 */
enum ViewEncapsulation {
  /** Use Angular's emulated encapsulation (default) */
  Emulated = 0,
  /** No encapsulation, styles are global */
  None = 2,
  /** Use Shadow DOM native encapsulation */
  ShadowDom = 3
}

/**
 * Defines change detection strategy options
 */
enum ChangeDetectionStrategy {
  /** Use OnPush change detection strategy */
  OnPush = 0,
  /** Use default change detection strategy */
  Default = 1
}

/**
 * Schema that allows any property on any element (for custom elements)
 */
const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata;

/**
 * Schema that allows any property on any element and doesn't report errors
 */
const NO_ERRORS_SCHEMA: SchemaMetadata;

/**
 * Observable-based event emitter for component outputs
 */
class EventEmitter<T> extends Subject<T> {
  /**
   * Creates an EventEmitter instance
   * @param isAsync - Whether to emit asynchronously
   */
  constructor(isAsync?: boolean);

  /**
   * Emits an event containing a given value
   * @param value - The value to emit
   */
  emit(value?: T): void;

  /**
   * Subscribes to the EventEmitter
   * @param next - Function to call on next emission
   * @param error - Function to call on error
   * @param complete - Function to call on completion
   * @returns Subscription object
   */
  subscribe(
    next?: (value: T) => void,
    error?: (error: any) => void,
    complete?: () => void
  ): Subscription;
}

/**
 * Creates a standalone component dynamically
 * @param component - The component type to create
 * @param options - Creation options
 * @returns ComponentRef instance
 */
function createComponent<C>(
  component: Type<C>,
  options: {
    environmentInjector: EnvironmentInjector;
    hostElement?: Element;
    elementInjector?: Injector;
    projectableNodes?: Node[][];
  }
): ComponentRef<C>;

/**
 * Reflects component metadata for introspection
 * @param component - Component type to reflect
 * @returns ComponentMirror with metadata
 */
function reflectComponentType<C>(component: Type<C>): ComponentMirror<C> | null;

/**
 * Checks if a type is a standalone component
 * @param type - Type to check
 * @returns True if type is standalone
 */
function isStandalone(type: Type<any>): boolean;

/**
 * Mirror interface for component reflection
 */
interface ComponentMirror<C> {
  /** Component type */
  type: Type<C>;
  /** Component selector */
  selector: string | null;
  /** Whether component is standalone */
  isStandalone: boolean;
  /** Component inputs */
  inputs: Array<{ propName: string; templateName: string }>;
  /** Component outputs */
  outputs: Array<{ propName: string; templateName: string }>;
}

/**
 * Represents a single property change
 */
class SimpleChange {
  constructor(
    public previousValue: any,
    public currentValue: any,
    public firstChange: boolean
  );

  /**
   * Check whether the new value is the first value assigned
   */
  isFirstChange(): boolean;
}

/**
 * Map of property changes keyed by property name
 */
interface SimpleChanges {
  [propName: string]: SimpleChange;
}

import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `
    <div class="user-card">
      <h3>{{user.name}}</h3>
      <p>{{user.email}}</p>
      <button (click)="onDelete()">Delete</button>
    </div>
  `,
  styles: [`
    .user-card { 
      border: 1px solid #ccc; 
      padding: 16px; 
      margin: 8px; 
    }
  `]
})
export class UserCardComponent implements OnInit, OnDestroy {
  @Input() user!: { name: string; email: string };
  @Output() delete = new EventEmitter<void>();

  ngOnInit(): void {
    console.log('UserCard initialized');
  }

  ngOnDestroy(): void {
    console.log('UserCard destroyed');
  }

  onDelete(): void {
    this.delete.emit();
  }
}

import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() appHighlight = '';
  @Input() defaultColor = 'yellow';

  @HostBinding('style.backgroundColor')
  backgroundColor = '';

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.backgroundColor = this.appHighlight || this.defaultColor;
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.backgroundColor = '';
  }
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  pure: true
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 50, trail: string = '...'): string {
    if (!value) return '';
    return value.length > limit ? value.substring(0, limit) + trail : value;
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserCardComponent } from './user-card.component';
import { HighlightDirective } from './highlight.directive';
import { TruncatePipe } from './truncate.pipe';

@NgModule({
  declarations: [
    UserCardComponent,
    HighlightDirective,
    TruncatePipe
  ],
  imports: [
    CommonModule
  ],
  exports: [
    UserCardComponent,
    HighlightDirective,
    TruncatePipe
  ]
})
export class SharedModule { }