signal-inputs.component.ts

@Component({
  template: `
    <h2>User List:</h2>
    <table>
      <thead>
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>Last Login</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        @for (user of filteredUsers(); track user.id) {
          <tr>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.lastLogin.toLocaleString() }}</td>
            <td>{{ user.role }}</td>
          </tr>
        } @empty {
          <tr>
            <td colspan="4">
              No users match the filter.
            </td>
          </tr>
        }
      </tbody>
    </table>
  `,
  standalone: true,
})
export class UserListComponent {
  users = input.required<User[]>();
  showOnlyActive = input(false);

  filteredUsers = computed(() => {
    const onlyActive = this.showOnlyActive();
    const usersList = this.users();

    if (!onlyActive) {
      return usersList;
    }

    return usersList.filter(user => user.isActive);
  });
}