Aliasing @Input and @Output

Illustrate how to provide aliases for @Input and @Output properties to use different names externally from the names used internally.
import { Component, Input, Output, EventEmitter } from '@angular/core';

  selector: 'app-example',
  template: '<div>{{ internalName }}</div><button (click)="externalEvent.emit('event data')">Click me</button>',
export class ExampleComponent {
  // Using aliases for input and output
  @Input('externalName') internalName: string;
  @Output('externalEventName') externalEvent: EventEmitter<string> = new EventEmitter<string>();
This Angular component uses @Input and @Output decorators with aliases. The @Input('externalName') alias allows the parent component to bind data to 'externalName' which corresponds to 'internalName' within the ExampleComponent. Similarly, the @Output('externalEventName') alias allows the ExampleComponent to emit events that the parent component listens to via 'externalEventName'. Internally, the component uses 'internalName' and 'externalEvent' while externally, the parent interacts with 'externalName' and 'externalEventName'.