Angular Output Event Validation

Implement a secure mechanism to validate data emitted by Angular Output events to parent components to prevent data tampering.

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

@Component({
  selector: 'app-child',
  template: '<button (click)="sendData()">Send Data</button>'
})
export class ChildComponent {
  private validData = { secure: 'Valid Data' };

  @Output() validatedData = new EventEmitter<any>();

  sendData() {
    // Data validation logic before emitting
    if (this.validate(this.validData)) {
      this.validatedData.emit(this.validData);
    } else {
      console.error('Invalid data attempt');
    }
  }

  private validate(data: any): boolean {
    // Implement validation logic here
    // For example, checking data structure or data signatures
    return true; // Return true if validation passes
  }
}

In the ChildComponent, we define a private property validData to hold the data and a validatedData emitter to output events. The sendData method includes a validation step before emitting the event. The validate method is a placeholder for actual validation logic.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child (validatedData)="onDataReceived($event)"></app-child>'
})
export class ParentComponent {

  onDataReceived(data: any) {
    console.log('Data received from child:', data);
    // Additional validation can be performed here if necessary
  }
}

In the ParentComponent, we listen for the validatedData event from ChildComponent with onDataReceived method; this is where we can perform additional validation if necessary.