import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';import { CommonModule } from '@angular/common';
@Component({  selector: 'app-user-card',  standalone: true,  imports: [CommonModule],  changeDetection: ChangeDetectionStrategy.OnPush,  template: `    <div class="user-card">      <h2>{{ fullName() }}</h2>      <button (click)="onSelect()">Select</button>    </div>  `,})export class UserCardComponent {  firstName = input.required<string>();  lastName = input.required<string>();  selected = output<string>();
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
  onSelect(): void {    this.selected.emit(this.fullName());  }}

import { Component, OnInit, inject } from '@angular/core';import { takeUntilDestroyed } from '@angular/core/rxjs-interop';import { UserService } from './user.service';
@Component({ selector: 'app-users', standalone: true, template: `...` })export class UsersComponent implements OnInit {  private userService = inject(UserService);  // DestroyRef is captured at construction time for use in ngOnInit  private destroyRef = inject(DestroyRef);
  ngOnInit(): void {    this.userService.getUsers()      .pipe(takeUntilDestroyed(this.destroyRef))      .subscribe({        next: (users) => { /* handle */ },        error: (err) => console.error('Failed to load users', err),      });  }}

// actionsexport const loadUsers = createAction('[Users] Load Users');export const loadUsersSuccess = createAction('[Users] Load Users Success', props<{ users: User[] }>());export const loadUsersFailure = createAction('[Users] Load Users Failure', props<{ error: string }>());
// reducerexport interface UsersState { users: User[]; loading: boolean; error: string | null; }const initialState: UsersState = { users: [], loading: false, error: null };
export const usersReducer = createReducer(  initialState,  on(loadUsers, (state) => ({ ...state, loading: true, error: null })),  on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })),  on(loadUsersFailure, (state, { error }) => ({ ...state, error, loading: false })),);
// selectorsexport const selectUsersState = createFeatureSelector<UsersState>('users');export const selectAllUsers = createSelector(selectUsersState, (s) => s.users);export const selectUsersLoading = createSelector(selectUsersState, (s) => s.loading);