Angular Skill

Angular 17 standalone component patterns for the casino platform's dual-frontend architecture. The customer frontend (casino-customer-f/) uses standalone components exclusively, while the admin frontend (casino-f/) uses a module-based approach. Both require strict RxJS subscription cleanup with takeUntil and use OnPush change detection for performance.

Quick Start

Standalone Component

@Component({
  selector: 'app-player-list',
  standalone: true,
  imports: [CommonModule, RouterModule],
  templateUrl: './player-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlayerListComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  players$ = new BehaviorSubject<Player[]>([]);

  constructor(private playerService: PlayerService) {}

  ngOnInit(): void {
    this.playerService.list().pipe(
      takeUntil(this.destroy$),
      map(page => page.content)
    ).subscribe(players => this.players$.next(players));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Service with State Management

@Injectable({ providedIn: 'root' })
export class WalletService implements OnDestroy {
  private balance$ = new BehaviorSubject<PlayerBalance | null>(null);
  private destroy$ = new Subject<void>();

  getBalance(): Observable<PlayerBalance | null> {
    return this.balance$.asObservable();
  }

  refreshBalance(playerId: number): void {
    this.http.get<PlayerBalance>(`${this.apiUrl}/${playerId}/balance`).pipe(
      takeUntil(this.destroy$),
      catchError(error => {
        console.error('Balance fetch failed:', error);
        return of(null);
      })
    ).subscribe(balance => this.balance$.next(balance));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Key Concepts

Concept	Usage	Example
Standalone	All new components	standalone: true in decorator
Cleanup	Every subscription	takeUntil(this.destroy$)
State	Service-level state	BehaviorSubject<T>
Performance	List rendering	trackBy + OnPush
Forms	All user input	Reactive forms with FormGroup

Common Patterns

HTTP with Error Handling

When: Any API call

this.http.post<Resource>(this.apiUrl, request).pipe(
  catchError(error => {
    console.error('Create failed:', error);
    return throwError(() => error);
  })
);

Form with Validation

When: User data entry

this.form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  amount: [null, [Validators.required, Validators.min(0)]]
});

See Also

• hooks - Lifecycle hooks and cleanup patterns
• components - Component structure and standalone patterns
• data-fetching - HTTP services and caching
• state - BehaviorSubject and state management
• forms - Reactive forms and validation
• performance - OnPush, trackBy, and optimization

Related Skills

• See the typescript skill for type definitions and interfaces
• See the spring-boot skill for backend API patterns
• See the playwright skill for E2E testing
• See the frontend-design skill for CSS and UI patterns