Angular Conditional Rendering and Looping Challenge

This challenge focuses on implementing control flow syntax within Angular templates to conditionally render elements and iterate over data. Mastering these concepts is crucial for building dynamic and responsive Angular applications, allowing you to display different content based on application state and data. You'll be using Angular's built-in *ngIf, *ngFor, and potentially other control flow directives.

Problem Description

You are tasked with creating a component that displays a list of users and conditionally renders a message based on whether the list is empty. The component should also highlight users based on a specific criteria (e.g., users with a role of "admin").

What needs to be achieved:

1. Create an Angular component.
2. Define an array of user objects within the component. Each user object should have properties like name, email, and role.
3. Display the list of users using *ngFor.
4. Conditionally render a message "No users found" if the user array is empty using *ngIf.
5. Highlight users with the role "admin" by adding a CSS class (e.g., "admin-user") to their corresponding list items.

Key Requirements:

• The component must be functional and display the users correctly.
• The conditional rendering and looping must be implemented using Angular's built-in control flow directives.
• The highlighting of admin users should be visually distinct.
• The component should handle the case where the user array is empty gracefully.

Expected Behavior:

• When the user array is populated, each user's name and email should be displayed in a list item. Admin users should have the "admin-user" class applied.
• When the user array is empty, the message "No users found" should be displayed.
• Changes to the user array (e.g., adding or removing users) should be reflected in the UI.

Edge Cases to Consider:

• Empty user array.
• User objects with missing properties (handle gracefully, perhaps by displaying a default value).
• Multiple users with the "admin" role.

Examples

Example 1:

Input: users = [{name: 'Alice', email: 'alice@example.com', role: 'user'}, {name: 'Bob', email: 'bob@example.com', role: 'admin'}, {name: 'Charlie', email: 'charlie@example.com', role: 'user'}]
Output:
<ul>
  <li class="admin-user">Alice - alice@example.com</li>
  <li class="admin-user">Bob - bob@example.com</li>
  <li>Charlie - charlie@example.com</li>
</ul>

Explanation: The list is rendered, and Bob, who has the role "admin", has the "admin-user" class applied.

Example 2:

Input: users = []
Output:
<p>No users found</p>

Explanation: The user array is empty, so the "No users found" message is displayed.

Example 3:

Input: users = [{name: 'Alice', email: 'alice@example.com', role: 'admin'}, {name: 'Bob', email: 'bob@example.com', role: 'admin'}]
Output:
<ul>
  <li class="admin-user">Alice - alice@example.com</li>
  <li class="admin-user">Bob - bob@example.com</li>
</ul>

Explanation: Both Alice and Bob are admins, so both list items have the "admin-user" class.

Constraints

• The component must be written in TypeScript.
• You must use Angular's built-in control flow directives (*ngIf, *ngFor).
• The CSS class for highlighting admin users should be named "admin-user".
• The component should be self-contained and not rely on external services (for this challenge).
• The user array should be initialized within the component's TypeScript file.

Notes

• Consider using template variables within the *ngFor loop to access the current user object.
• Think about how to handle potential errors or missing data within the user objects.
• Focus on clean and readable code. Proper indentation and meaningful variable names are encouraged.
• You can add basic CSS styling to the "admin-user" class to visually distinguish admin users (e.g., background color). The styling itself is not the focus of this challenge.