Component Bridging

/**
 * Creates an AngularJS directive wrapper for an Angular component
 * @param info - Configuration object for downgrading
 * @returns AngularJS directive definition object
 */
function downgradeComponent(info: {
  /** Angular component class to downgrade */
  component: Type<any>;
  /** Optional associated downgraded module name */
  downgradedModule?: string;
  /** Whether to propagate digest cycles (default: true) */
  propagateDigest?: boolean;
  /** @deprecated since v4. This parameter is no longer used */
  inputs?: string[];
  /** @deprecated since v4. This parameter is no longer used */
  outputs?: string[];
  /** @deprecated since v4. This parameter is no longer used */
  selectors?: string[];
}): any;

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { downgradeComponent } from "@angular/upgrade/static";

// Angular component
@Component({
  selector: "user-card",
  template: `
    <div class="user-card">
      <h3>{{user.name}}</h3>
      <p>{{user.email}}</p>
      <button (click)="onSelect()">Select User</button>
    </div>
  `
})
export class UserCardComponent {
  @Input() user: any;
  @Output() selected = new EventEmitter<any>();
  
  onSelect() {
    this.selected.emit(this.user);
  }
}

// Register as AngularJS directive
angular.module("myApp").directive("userCard", 
  downgradeComponent({ 
    component: UserCardComponent,
    propagateDigest: false // Optimize performance
  })
);

<!-- Use Angular component in AngularJS template -->
<user-card 
  user="$ctrl.currentUser" 
  on-selected="$ctrl.handleUserSelection($event)">
</user-card>

/**
 * Abstract base class for upgrading AngularJS components to Angular
 * Implements Angular lifecycle hooks and manages AngularJS component lifecycle
 */
abstract class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
  /**
   * Creates wrapper for AngularJS component
   * @param name - Name of the AngularJS directive/component to upgrade
   * @param elementRef - Angular ElementRef for component location
   * @param injector - Angular injector for dependency injection
   */
  constructor(name: string, elementRef: ElementRef, injector: Injector);
  
  /** Angular lifecycle hook - component initialization */
  ngOnInit(): void;
  
  /** Angular lifecycle hook - input property changes */
  ngOnChanges(changes: SimpleChanges): void;
  
  /** Angular lifecycle hook - change detection */
  ngDoCheck(): void;
  
  /** Angular lifecycle hook - component cleanup */
  ngOnDestroy(): void;
}

import { Component, Input, Output, EventEmitter, ElementRef, Injector } from "@angular/core";
import { UpgradeComponent } from "@angular/upgrade/static";

// AngularJS component (existing)
angular.module("myApp").component("userProfile", {
  bindings: {
    userId: "<",
    onEdit: "&"
  },
  template: `
    <div class="profile">
      <h2>User Profile: {{$ctrl.userId}}</h2>
      <button ng-click="$ctrl.onEdit()">Edit Profile</button>
    </div>
  `
});

// Angular wrapper component
@Component({
  selector: "user-profile",
  template: ""
})
export class UserProfileComponent extends UpgradeComponent {
  @Input() userId: string;
  @Output() edit = new EventEmitter<void>();
  
  constructor(elementRef: ElementRef, injector: Injector) {
    // Specify AngularJS component name to upgrade
    super("userProfile", elementRef, injector);
  }
}

<!-- Use AngularJS component in Angular template -->
<user-profile 
  [userId]="selectedUserId" 
  (edit)="handleEditProfile()">
</user-profile>

import { Component, OnInit, OnDestroy } from "@angular/core";
import { downgradeComponent } from "@angular/upgrade/static";

@Component({
  selector: "lifecycle-demo",
  template: "<div>Lifecycle Demo</div>"
})
export class LifecycleDemoComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log("Angular component initialized");
    // This will be called when AngularJS directive links
  }
  
  ngOnDestroy() {
    console.log("Angular component destroyed");
    // This will be called when AngularJS directive scope is destroyed
  }
}

angular.module("myApp").directive("lifecycleDemo",
  downgradeComponent({ component: LifecycleDemoComponent })
);