Comunicación entre componentes

• @Input(): Pasa datos del componente padre al hijo.

HTML

        
        <app-hijo [mensaje]="mensajeDelPadre"></app-hijo>
        
    

TypeScript

        
        // hijo.component.ts
        import { Component, Input  } from '@angular/core';

        @Component({ /* ... */ })
        export class HijoComponent {
            @Input() mensaje: string = '';
        }
        
    

• @Output() y EventEmitter: Envía datos del hijo al padre.

HTML

        
        <app-hijo (mensajeEnviado)="recibirMensaje($event)"></app-hijo>
        
    

TypeScript

        
        // hijo.component.ts
        import { Component, Output, EventEmitter  } from '@angular/core';

        @Component({ /* ... */ })
        export class HijoComponent {
            @Output() mensajeEnviado = new EventEmitter<string>();

            enviarMensaje() {
                this.mensajeEnviado.emit('Hola desde el hijo!');
            }
        }