Dealing with Complex Objects as @Input Data

Provide an example of a child component that receives and displays data from a complex object passed as an @Input.

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

@Component({
  selector: 'app-child-component',
  template: `
    <div *ngIf="complexData">
      <h2>{{ complexData.title }}</h2>
      <p>{{ complexData.description }}</p>
      <ul>
        <li *ngFor="let item of complexData.items">{{ item }}</li>
      </ul>
    </div>
  `
})
export class ChildComponent implements OnInit {
  @Input() complexData: any;

  ngOnInit(): void {
    // Perform initialization or deep data validation/manipulation here if needed
    console.log('Received complexData: ', this.complexData);
  }
}

This is an Angular child component that uses an @Input decorator to receive a complex object from its parent component. The template uses Angular's structural directives *ngIf and *ngFor to conditionally display the complex data and iterate over its `items` array. The ngOnInit lifecycle hook is used for additional initialization or validation of the complex data.