Angular Output Event: Parent-Child Communication

This challenge focuses on a fundamental aspect of Angular development: parent-child component communication using output events. You will build a scenario where a child component emits an event to notify its parent component about a user interaction, allowing the parent to react accordingly. This is crucial for building dynamic and interactive user interfaces.

Problem Description

You need to create two Angular components: ChildComponent and ParentComponent.

1. ChildComponent: This component will have a button. When the button is clicked, it should emit a custom event with a specific payload.
2. ParentComponent: This component will host the ChildComponent. It should listen for the custom event emitted by the ChildComponent and display the received payload.

Key Requirements

• ChildComponent:
  • Must have a button.
  • When the button is clicked, an @Output() event named dataEmitted must be triggered.
  • The dataEmitted event should pass a string payload (e.g., a message indicating the button was clicked).
  • Use EventEmitter for the output event.
• ParentComponent:
  • Must include ChildComponent in its template.
  • Must listen for the dataEmitted event from ChildComponent.
  • Must have a property to store the data received from the child.
  • Must display the received data in its template.

Expected Behavior

When the user clicks the button in the ChildComponent, the ParentComponent should update its display to show the message sent from the child.

Edge Cases

• Ensure the event is only emitted on button click.
• Consider what happens if the parent component doesn't subscribe to the event (though this challenge requires it to).

Examples

Example 1:

child.component.ts (Relevant parts)

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

@Component({
  selector: 'app-child',
  template: '<button (click)="emitData()">Click Me</button>'
})
export class ChildComponent {
  @Output() dataEmitted = new EventEmitter<string>();

  emitData() {
    this.dataEmitted.emit('Hello from child!');
  }
}

parent.component.ts (Relevant parts)

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child (dataEmitted)="handleDataFromChild($event)"></app-child>
    <p>Data from child: {{ receivedData }}</p>
  `
})
export class ParentComponent {
  receivedData: string = '';

  handleDataFromChild(data: string) {
    this.receivedData = data;
  }
}

Input: User clicks the "Click Me" button in ChildComponent.

Output (rendered in browser):

Parent Component
[Button: Click Me]
Data from child: Hello from child!

Explanation: The button click in ChildComponent triggers emitData(), which emits the string 'Hello from child!' via the dataEmitted event. ParentComponent's (dataEmitted) binding catches this event, calling handleDataFromChild() with the payload. receivedData in ParentComponent is updated, and the template re-renders to show the new value.

Constraints

• The solution must be implemented using Angular and TypeScript.
• Components should be standard Angular components.
• No third-party libraries beyond Angular's core modules are permitted.
• The event payload must be a string.

Notes

• Think about how @Output() decorators and EventEmitter work together.
• The (eventBinding) syntax in the parent's template is key to listening for child events.
• The $event keyword in the parent's template refers to the payload emitted by the child.
• You will need to create two separate component files (e.g., child.component.ts, child.component.html, child.component.css and similarly for parent). For this challenge, focus on the .ts and .html files.