Implementing Signal Outputs in Angular Components

This challenge focuses on leveraging Angular Signals for efficient and declarative output emission from components. You will learn to use the output function to create reactive outputs that components can subscribe to, improving communication between parent and child components in a more modern and performant way.

Problem Description

Your task is to create an Angular component, UserProfileComponent, that emits user profile updates using Angular Signals. This component will manage a user's name and age and should provide a way for its parent component to react to changes in these properties. Specifically, you need to implement two signal outputs: one for when the user's name changes and another for when their age changes.

Key Requirements:

1. Create a UserProfileComponent: This component should accept an initial userName and userAge as inputs.
2. Implement Signal Outputs:
   • A signal output named userNameChanged that emits the new username whenever it's updated.
   • A signal output named userAgeChanged that emits the new user age whenever it's updated.
3. Internal State Management: Use Angular Signals (signal and computed) to manage the internal state of the user's name and age within UserProfileComponent.
4. Update Logic: Implement methods within UserProfileComponent to modify the userName and userAge signals. These modifications should automatically trigger the respective signal outputs.
5. Parent Component Subscription: Demonstrate how a parent component (AppComponent) can subscribe to and display data received from these signal outputs.

Expected Behavior:

When a user's name or age is updated within UserProfileComponent using its internal methods, the corresponding signal output should emit the new value. The AppComponent should display these emitted values in real-time.

Edge Cases:

• Consider how initial input values are handled.
• Ensure that updates trigger outputs correctly even if the new value is the same as the old one (though this is less critical for this specific problem but good to keep in mind for real-world scenarios).

Examples

Example 1: Initial Setup and Updates

Let's assume AppComponent renders UserProfileComponent like this:

<app-user-profile [userName]="'Alice'" [userAge]="30"></app-user-profile>

And UserProfileComponent has methods updateUserName(newName: string) and updateUserAge(newAge: number).

Scenario:

1. UserProfileComponent is initialized with userName = 'Alice' and userAge = 30.
2. AppComponent calls userProfileComponentInstance.updateUserName('Bob').
3. AppComponent then calls userProfileComponentInstance.updateUserAge(31).

Expected Output (in AppComponent's template or console):

• Initially, no output is received.
• After updateUserName('Bob') is called, AppComponent receives 'Bob' from userNameChanged.
• After updateUserAge(31) is called, AppComponent receives 31 from userAgeChanged.

Explanation:

The userNameChanged signal output should emit 'Bob' when updateUserName is called and the internal userName signal is updated. Similarly, the userAgeChanged signal output should emit 31 when updateUserAge is called and the internal userAge signal is updated.

Constraints

• The solution must be implemented using Angular version 16 or later, which supports signals.
• All component logic and template binding should be in TypeScript and HTML respectively.
• Avoid using RxJS Subject or EventEmitter for outputting data from UserProfileComponent. Only use Angular Signals for outputs.
• The solution should be efficient and demonstrably reactive.

Notes

• The output function from @angular/core is your primary tool for creating signal-based outputs.
• You'll need to define your component's inputs using the standard @Input() decorator.
• Think about how to connect the internal signal updates to the output function's emission. Angular's reactivity model will handle much of this for you.
• In AppComponent, you'll bind to these signal outputs as if they were event outputs, but they will behave reactively.