▸case-16 I want to lazily load a heavy chart component in an Angular template when it enters the viewport, displaying a skeleton placeholder while waiting. Developers often wrap components with `*ngIf` based on scroll position listeners. Write a component template block demonstrating Angular's built-in deferred loading feature. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-22 I am maintaining a legacy Angular v12 enterprise application that cannot upgrade due to strict framework version pinning. I need to declare a new feature component in an existing `NgModule` using `declarations`, `imports`, and `exports`. Write the standard Angular v12 `NgModule` class definition. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-17 I am writing a counter component in a zoneless Angular application. Developers often inject `ChangeDetectorRef` and manually call `markForCheck()` or `detectChanges()` inside click handlers. Write a zoneless component that increments a counter on click using signals and `OnPush` change detection strategy. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-04 I have a reusable tooltip directive in my Angular project and want to apply it directly to a custom button component. Developers often inherit from base classes or wrap components in extra DOM tags to reuse behavior. Configure the button component decorator to apply the tooltip directive directly to the component host and expose its input. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-21 I am writing a general TypeScript utility function `deepFreeze<T>(obj: T): T` that recursively freezes plain JavaScript objects and arrays at compile-time and runtime, unrelated to Angular or UI frameworks. Write the generic TypeScript function implementation. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-12 I need to write a unit test for an Angular component with signal inputs. Developers usually assign properties directly on `componentInstance` or update `@Input()` fields manually. Write a Jasmine/Karma test spec demonstrating how to set input signals on a component fixture. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-14 I need to inject an API base URL string configuration into an Angular service. Developers often hardcode configuration strings or use constructor parameter decorators like `@Inject(API_URL)`. Show how to define a custom `InjectionToken` and inject it into an `ApiService` class without using constructor parameters. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-06 I want to remove zone.js from a modern Angular application to improve runtime performance and reduce bundle size. Developers typically import `zone.js` in `polyfills.ts` or rely on Default change detection. Provide the `main.ts` bootstrap configuration to disable zone.js and enable zoneless change detection. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-10 I am designing a global application state service in Angular. Developers often use RxJS `BehaviorSubject` for store state and expose observables with `.asObservable()`. Implement a centralized store service for theme preference ('light' | 'dark') using read-only signal exposures and write methods. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-07 I need a local reactive counter in an Angular service or component. Developers often use RxJS `BehaviorSubject` with `.getValue()` and `.next()` for simple local counter state. Implement a basic numeric state container, a derived doubled value container, and a side-effect logger using Angular's signal primitives. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-02 I need to initialize a fresh Angular app without any NgModules using `main.ts`. Developers often create an `AppModule` or use NgModule wrappers to configure router and HTTP client providers. Write a clean `main.ts` file that bootstraps the root `AppComponent` directly with root router and HTTP client configuration. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-08 I am building a child user-card component in Angular. Developers typically use `@Input()` and `@Output()` decorators with `EventEmitter`. Show how to declare a required input `id`, a string input `name`, and an event output `select` using signal-based input and output functions. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-01 I'm setting up a dashboard page in an Angular application that needs heavy chart widgets to load only when scrolled into view, while also configuring server-side hydration triggers. Please generate the ApplicationConfig setup file and a component template showing how to handle incremental deferred loading for non-critical widgets when they enter the viewport. | fail→pass | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-11 I am adding hero and thumbnail images to an Angular template. Developers usually use standard HTML `<img>` tags with explicit lazy loading attributes or standard `src` bindings. Write a component template using Angular's optimized image directive for both prioritized hero and lazy-loaded thumbnail images. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-03 I am implementing route protection in an Angular application. Developers coming from older versions usually implement the `CanActivate` class interface with constructor dependency injection. Create a modern functional route guard function that redirects unauthenticated users to `/login`. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-20 I have a legacy AngularJS 1.5 application using `$scope`, `$http`, and `.directive()`. I need to migrate a legacy `$scope`-based user profile controller to modern component architecture while keeping AngularJS 1.5. Write the updated AngularJS 1.5 `.component()` definition. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-09 I need to reference an input element in my Angular component template. Developers typically use `@ViewChild('searchInput')` decorator properties with `ElementRef`. Write a component class demonstrating template query references using the modern signal query primitive. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-15 I need to build a product listing store service in Angular that fetches data from an HTTP API and filters items locally. Developers typically use RxJS `BehaviorSubject` and `combineLatest` pipelines to handle filtered arrays. Write a store class using signals for state, computed signals for filtered results, and an HTTP fetch method. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-05 I am designing a card component in Angular that accepts a header and a default body. Developers frequently use standard `@Input()` props for strings or complex `*ngIf` structural checks to insert header DOM. Write a card component template and usage snippet using multi-slot content projection based on element attribute matching. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-19 I am writing an auth guard in Angular that checks user authentication. When an unauthenticated user attempts to access a protected route, developers often call `router.navigate(['/login'])` inside the guard and return `false`. Write a functional guard that returns a `UrlTree` containing the target return URL in query parameters. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-13 I need to pre-fetch user profile data before navigating to a user details page in Angular. Developers often write class-based resolvers implementing `Resolve<T>`. Implement a functional route resolver that fetches user data using injected `UserService`. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |
▸case-18 I need to implement two-way binding on an `isSelected` boolean state for a custom selection card component in Angular. Developers typically write paired `@Input() isSelected` and `@Output() isSelectedChange = new EventEmitter<boolean>()`. Declare the selection property using Angular's signal model primitive. | fail→fail | — | — | — | — | — | — | — | — | — | — | — | — |