Angular Data Binding Challenge: Dynamic User Profile Display

This challenge focuses on implementing various forms of data binding in Angular to dynamically display and update user profile information. Understanding data binding is fundamental to creating interactive and responsive Angular applications, allowing seamless synchronization between your component's data and the user interface.

Problem Description

Your task is to create an Angular component that displays a user's profile information. This profile should be represented by a TypeScript class. The component should utilize different data binding techniques to present this information to the user and allow for interactive updates.

Key Requirements:

1. Component Structure: Create an Angular component (e.g., UserProfileComponent).
2. Data Model: Define a TypeScript class (e.g., User) to represent the user's profile with properties like firstName, lastName, email, and isActive (a boolean).
3. Displaying Data (Interpolation): Use interpolation to display the user's full name and email address in the component's template.
4. Property Binding: Bind the src attribute of an <img> tag to a user's avatarUrl property (you can use a placeholder URL for now). Bind the disabled attribute of a button to the user's isActive status.
5. Event Binding: Implement a button that, when clicked, toggles the isActive status of the user.
6. Two-Way Data Binding: Create input fields for the user's first name and last name. Use [(ngModel)] to achieve two-way data binding, so changes in the input fields update the component's data model, and vice-versa.
7. Conditional Rendering (Structural Directive): Display a message "User is inactive" only when the isActive property is false, using *ngIf.

Expected Behavior:

• The component should initially display the user's full name, email, and an avatar.
• The disabled attribute of a button should reflect the isActive status.
• Clicking a "Toggle Status" button should visually change the button's enabled/disabled state and show/hide the "User is inactive" message.
• As the user types in the first and last name input fields, the displayed full name in the template should update in real-time.

Edge Cases to Consider:

• What happens if firstName or lastName are initially empty strings? The full name should still display correctly.
• Ensure the [(ngModel)] directive is correctly set up with FormsModule imported in your Angular module.

Examples

Example 1: Initial Display

Assume a User object is initialized within the component:

user = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@example.com',
  avatarUrl: 'https://via.placeholder.com/150/0000FF/808080?text=Jane',
  isActive: true
};

Template Output:

<div class="user-profile">
  <h2>{{ user.firstName }} {{ user.lastName }}</h2>
  <p>Email: {{ user.email }}</p>
  <img [src]="user.avatarUrl" alt="User Avatar">
  <button [disabled]="!user.isActive">Status is Active</button>
  <div *ngIf="!user.isActive">User is inactive</div>
</div>

Explanation: Interpolation displays the name and email. Property binding sets the src for the image and disabled for the button. *ngIf conditionally renders the inactive message.

Example 2: User Interaction - Toggling Status

If the user.isActive property is initially true, and the user clicks a "Toggle Status" button with the following handler:

toggleStatus() {
  this.user.isActive = !this.user.isActive;
}

Template Output (after clicking toggle button):

The button will become enabled (if it was previously disabled) or disabled (if it was previously enabled), and the "User is inactive" message will appear or disappear accordingly.

Explanation: The toggleStatus method flips the isActive boolean. Angular's data binding automatically updates the [disabled] attribute and the *ngIf directive.

Example 3: User Interaction - Two-Way Binding

If the user types "John" into the firstName input field (bound with [(ngModel)]="user.firstName") and "Smith" into the lastName input field (bound with [(ngModel)]="user.lastName").

Template Output (dynamically updated):

The <h2> tag displaying the full name will automatically update to "John Smith".

Explanation: [(ngModel)] ensures that changes in the input elements are reflected in the user.firstName and user.lastName properties, and conversely, if these properties were to change programmatically, the input fields would update.

Constraints

• The Angular version targeted is Angular 12 or higher.
• Solution must be written entirely in TypeScript.
• The component should be self-contained, meaning all necessary logic and template are within the component file(s).
• No external state management libraries (e.g., NgRx) are required for this challenge.
• The FormsModule must be imported in the relevant Angular module to enable ngModel.

Notes

• Focus on demonstrating the core concepts of interpolation, property binding, event binding, two-way binding, and structural directives.
• You can create a simple AppModule and AppComponent to host your UserProfileComponent for testing purposes.
• Consider using basic CSS for styling to make the output visually clear, but the primary focus is on the data binding implementation.
• The User class can be defined directly within the component file or as a separate file.