Angular interview questions and answers

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">+1</button>
  `,
  standalone: true,
})
export class CounterComponent {
  count = 0;
  increment() { this.count++; }
}

@Component({
  selector: 'app-profile',
  template: `<p>{{ user?.name }}</p>`,
  standalone: true,
})
export class ProfileComponent implements OnInit {
  user?: User;

  constructor(
    private userService: UserService,
    private router: Router,
  ) {}

  ngOnInit() {
    this.userService.getCurrentUser().subscribe(u => this.user = u);
  }
}

// child.component.ts
@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">+</button>
  `
})
export class CounterComponent {
  @Input() count = 0;
  @Output() countChange = new EventEmitter<number>();

  increment() {
    this.countChange.emit(this.count + 1);
  }
}

// parent template
<app-counter [count]="myCount" (countChange)="myCount = $event" />

import { createSelector, createFeatureSelector } from '@ngrx/store';

// Feature selector — selects the 'users' slice of root state
export const selectUsersState = createFeatureSelector<UsersState>('users');

// Derived selectors — memoized
export const selectAllUsers = createSelector(
  selectUsersState,
  state => state.users
);

export const selectUsersLoading = createSelector(
  selectUsersState,
  state => state.loading
);

export const selectActiveUsers = createSelector(
  selectAllUsers,
  users => users.filter(u => u.active)  // only re-computed when selectAllUsers changes
);

// Component usage:
@Component({ standalone: true })
export class UsersComponent {
  users$ = inject(Store).select(selectAllUsers);
  loading$ = inject(Store).select(selectUsersLoading);
  activeUsers$ = inject(Store).select(selectActiveUsers);
}

@Component({
  selector: 'app-user-detail',
  template: `<p>User ID: {{ userId }}</p>`,
  standalone: true,
})
export class UserDetailComponent implements OnInit {
  userId?: string;

  // Option 1: snapshot — one-time read (use when component is not reused for same route)
  private route = inject(ActivatedRoute);

  ngOnInit() {
    this.userId = this.route.snapshot.params['id'];

    // Option 2: Observable — reactive (use when navigating between same route with different params)
    this.route.params.subscribe(params => {
      this.userId = params['id'];
      this.loadUser(this.userId!);
    });

    // Option 3: Signal (Angular 16+)
    this.userId = toSignal(this.route.params.pipe(map(p => p['id'])), { initialValue: '' })();
  }
}

@Injectable({ providedIn: 'root' })
class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    // No request yet — just a definition
    return this.http.get<User[]>('/api/users');
  }
}

@Component({ ... })
class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    // Request fires HERE when subscribe() is called
    this.userService.getUsers().subscribe(users => {
      this.users = users;
    });

    // Or let async pipe handle it:
    this.users$ = this.userService.getUsers();  // no request yet
  }
}

@Component({
  selector: 'app-card',      // used as <app-card></app-card>
  template: `<div class="card"><ng-content></ng-content></div>`,
  standalone: true,
})
export class CardComponent {}

@Component({
  selector: 'app-dashboard',
  template: `...`,
  standalone: true,
})
export class DashboardComponent {
  // Works in field initializers (injection context is active)
  private userService = inject(UserService);
  private router = inject(Router);
  private analyticsService = inject(AnalyticsService, { optional: true });

  // Constructor is optional — can be omitted entirely
}

@Component({
  template: `
    <!-- Conditional rendering -->
    @if (isLoggedIn) {
      <p>Welcome, {{ username }}!</p>
    } @else {
      <p>Please sign in.</p>
    }

    <!-- List rendering -->
    @for (item of items; track item.id) {
      <li>{{ item.name }}</li>
    } @empty {
      <li>No items found.</li>
    }
  `
})

@Component({
  selector: 'app-cart',
  template: `
    @if (loading$ | async) {
      <p>Loading...</p>
    } @else {
      @for (item of items$ | async; track item.id) {
        <app-cart-item [item]="item" />
      }
    }
  `,
  standalone: true,
  imports: [AsyncPipe, CartItemComponent],
})
export class CartComponent {
  private store = inject(Store);

  items$ = this.store.select(selectCartItems);
  loading$ = this.store.select(selectCartLoading);
  totalPrice$ = this.store.select(selectCartTotalPrice);

  removeItem(itemId: string) {
    this.store.dispatch(removeFromCart({ itemId }));
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-timer #timer />`,
  standalone: true,
  imports: [TimerComponent],
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(TimerComponent) timer!: TimerComponent;
  // OR by template ref: @ViewChild('timer') timer!: TimerComponent;

  ngAfterViewInit() {
    this.timer.start();  // ✅ available here
  }
}

@NgModule()
export class AuthModule {
  static forRoot(config: AuthConfig): ModuleWithProviders<AuthModule> {
    return {
      ngModule: AuthModule,
      providers: [
        AuthService,           // singleton at root level
        { provide: AUTH_CONFIG, useValue: config },
      ],
    };
  }

  static forChild(): ModuleWithProviders<AuthModule> {
    return {
      ngModule: AuthModule,
      providers: [],           // no services — reuse root singleton
    };
  }
}

// AppModule
@NgModule({ imports: [AuthModule.forRoot({ realm: 'codejump' })] })
export class AppModule {}

// FeatureModule (lazy)
@NgModule({ imports: [AuthModule.forChild()] })
export class ProfileModule {}

// app.routes.ts
export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  {
    path: 'users',
    loadComponent: () => import('./users/users.component').then(m => m.UsersComponent),
  },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', component: NotFoundComponent },
];

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

import { createReducer, on } from '@ngrx/store';

export const cartReducer = createReducer(
  initialCartState,

  // Single action handler
  on(addToCart, (state, { item }) => ({
    ...state,
    items: [...state.items, item],
  })),

  // Multiple actions with same handler
  on(clearCart, resetCart, state => ({
    ...state,
    items: [],
    total: 0,
  })),

  // Handler with complex logic
  on(applyDiscount, (state, { code, percentage }) => {
    const discountedTotal = state.subtotal * (1 - percentage / 100);
    return {
      ...state,
      coupon: code,
      discount: percentage,
      total: discountedTotal,
    };
  }),
);

// user.resolver.ts
export const userResolver: ResolveFn<User> = (route) => {
  const userService = inject(UserService);
  const router = inject(Router);

  return userService.getUser(route.params['id']).pipe(
    catchError(() => {
      router.navigate(['/not-found']);
      return EMPTY;
    }),
  );
};

// Route config:
{
  path: 'users/:id',
  component: UserDetailComponent,
  resolve: { user: userResolver },
}

// Component — data is available synchronously:
@Component({ standalone: true })
export class UserDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  user!: User;

  ngOnInit() {
    this.user = this.route.snapshot.data['user'];
    // OR with Angular 16+ withComponentInputBinding():
    // @Input() user!: User;  // auto-bound from resolver
  }
}

import { ReplaySubject } from 'rxjs';

const replay$ = new ReplaySubject<string>(3);

replay$.next('a');
replay$.next('b');
replay$.next('c');
replay$.next('d');  // 'a' is dropped from buffer (buffer size is 3)

// New subscriber immediately receives buffered values:
replay$.subscribe(v => console.log('New subscriber:', v));
// "New subscriber: b"
// "New subscriber: c"
// "New subscriber: d"

// Useful for caching with shareReplay:
const cachedUsers$ = this.http.get<User[]>('/api/users').pipe(
  shareReplay(1),  // ReplaySubject(1) under the hood
);
// All subscribers get the same cached response

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content select="[card-header]" />
      <div class="body">
        <ng-content />
      </div>
    </div>
  `,
  standalone: true,
})
export class CardComponent {}

// Usage:
// <app-card>
//   <h2 card-header>Title</h2>
//   <p>Body content here</p>
// </app-card>

Element injector (component/directive providers)
  → Parent element injectors (up the component tree)
    → Module injector (for NgModule-based apps)
      → Root injector (providedIn: 'root')
        → Platform injector
          → Null injector (throws NullInjectorError)

const routes: Routes = [
  // Eager loading — bundled in main chunk:
  { path: 'home', component: HomeComponent },

  // Lazy loading — separate chunk downloaded on demand:
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then(m => m.DashboardComponent),
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes').then(m => m.adminRoutes),
  },
];

// Setup:
provideStoreDevtools({
  maxAge: 25,                      // retain last 25 actions
  logOnly: !isDevMode(),           // disable DevTools in production
  autoPause: true,                 // pause recording when not in use
  trace: false,                    // include stack trace
  traceLimit: 75,                  // limit stack trace lines
  connectInZone: true,             // ensure CD after DevTools actions
})

// Features:
// 1. Action log: see every dispatched action with its payload
// 2. State diff: see exactly what changed after each action
// 3. Time-travel: jump back to any previous state
// 4. Replay: re-dispatch actions from a specific point
// 5. Import/Export: save and load action logs for bug reports
// 6. Action filtering: filter the action log for debugging

// Pure pipe (default) — only re-runs when input reference changes:
@Pipe({ name: 'filter', standalone: true })
export class FilterPipe implements PipeTransform {
  transform(items: Item[], query: string): Item[] {
    return items.filter(item => item.name.includes(query));
  }
}

// Impure pipe — re-runs on every change detection cycle:
@Pipe({ name: 'filterImpure', pure: false, standalone: true })
export class FilterImpurePipe implements PipeTransform {
  transform(items: Item[], query: string): Item[] {
    return items.filter(item => item.name.includes(query));
  }
}

@Directive({
  selector: '[appUnless]',
  standalone: true,
})
export class UnlessDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<unknown>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

// Usage: <div *appUnless="isLoggedIn">Please sign in</div>

// composables/use-current-user.ts
export function useCurrentUser(): Signal<User | null> {
  const authService = inject(AuthService);
  const userService = inject(UserService);

  return computed(() => {
    const token = authService.token();
    return token ? userService.getUserFromToken(token) : null;
  });
}

// composables/use-page-title.ts
export function usePageTitle(title: string | Signal<string>): void {
  const titleService = inject(Title);
  const appName = inject(APP_NAME);

  effect(() => {
    const resolvedTitle = typeof title === 'string' ? title : title();
    titleService.setTitle(`${resolvedTitle} | ${appName}`);
  });
}

// Usage in component
@Component({ ... })
export class ProfileComponent {
  // Called during field initialization = injection context ✅
  currentUser = useCurrentUser();
  constructor() { usePageTitle('Profile'); }
}

// Actions
export const updateTodo = createAction('[Todo] Update Todo', props<{ todo: Todo }>());
export const updateTodoSuccess = createAction('[Todo API] Update Todo Success', props<{ todo: Todo }>());
export const updateTodoFailure = createAction('[Todo API] Update Todo Failure', props<{ originalTodo: Todo; error: string }>());

// Reducer — apply immediately
on(updateTodo, (state, { todo }) =>
  todoAdapter.upsertOne(todo, state)        // ← optimistic update
),
on(updateTodoSuccess, (state, { todo }) =>
  todoAdapter.upsertOne(todo, state)        // confirm with server version
),
on(updateTodoFailure, (state, { originalTodo }) =>
  todoAdapter.upsertOne(originalTodo, state) // revert to original
),

// Effect — capture originalTodo (pre-optimistic value) for rollback.
// concatLatestFrom reads the store lazily, when the action arrives.
updateTodo$ = createEffect(() =>
  this.actions$.pipe(
    ofType(updateTodo),
    concatLatestFrom(({ todo }) => this.store.select(selectTodoById(todo.id))),
    concatMap(([{ todo }, originalTodo]) =>
      this.todoService.update(todo).pipe(
        map(updated => updateTodoSuccess({ todo: updated })),
        catchError(error =>
          of(updateTodoFailure({ originalTodo: originalTodo!, error: error.message }))
        ),
      )
    ),
  )
);

export const loggingGuard: CanActivateFn = (route, state) => {
  // state: RouterStateSnapshot
  console.log('Navigating to:', state.url);

  // Traverse the route tree:
  let node: ActivatedRouteSnapshot | null = state.root;
  while (node) {
    console.log({
      path: node.routeConfig?.path,
      params: node.params,
      queryParams: node.queryParams,
      data: node.data,
    });
    node = node.firstChild;
  }

  return true;
};

// Getting current state in a service:
@Injectable({ providedIn: 'root' })
class RouteStateService {
  private router = inject(Router);

  getCurrentParams(): Record<string, string> {
    let route = this.router.routerState.snapshot.root;
    const params: Record<string, string> = {};

    while (route.firstChild) {
      Object.assign(params, route.params);
      route = route.firstChild;
    }

    return { ...params, ...route.params };
  }
}

import { interval } from 'rxjs';
import { bufferTime, windowTime, mergeAll, map } from 'rxjs/operators';

// bufferTime — collects into arrays and emits arrays
interval(100).pipe(
  bufferTime(500),  // collect emissions for 500ms, then emit array
).subscribe(batch => {
  console.log('Batch:', batch);  // [0,1,2,3,4] (5 values per 500ms)
});

// windowTime — emits Observables (windows)
interval(100).pipe(
  windowTime(500),  // emit a new Observable every 500ms
  mergeMap(window$ => window$.pipe(
    reduce((acc, v) => acc + v, 0),  // sum each window
  )),
).subscribe(windowSum => {
  console.log('Window sum:', windowSum);
});

// bufferTime for batching API calls (debounce + batch pattern):
userActions$.pipe(
  bufferTime(200),
  filter(actions => actions.length > 0),
  switchMap(actions => this.api.batchProcess(actions)),
).subscribe();

@Component({
  template: `
    <!-- ng-container: grouping without extra DOM element -->
    <ng-container *ngIf="isAdmin">
      <button>Edit</button>
      <button>Delete</button>
    </ng-container>

    <!-- ng-template: reusable template block -->
    <ng-template #loadingTpl>
      <div class="spinner">Loading…</div>
    </ng-template>

    @if (isLoading) {
      <ng-container *ngTemplateOutlet="loadingTpl" />
    }
  `
})

@Component({
  selector: 'app-counter',
  template: `<p>Count: {{ count() }}</p><button (click)="inc()">+1</button>`,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CounterComponent {
  count = signal(0);

  inc() {
    this.count.update(c => c + 1);
  }
}

// utility function — no need for the consumer to manage cleanup
export function autoRefresh(intervalMs: number): void {
  const destroyRef = inject(DestroyRef);
  const router = inject(Router);

  const id = setInterval(() => router.navigate(['/refresh']), intervalMs);

  destroyRef.onDestroy(() => clearInterval(id));
}

// Service — cleanup tied to the injector's lifetime
@Injectable()
class WebSocketService {
  private ws: WebSocket;

  constructor(destroyRef: DestroyRef) {
    this.ws = new WebSocket('wss://api.example.com');
    destroyRef.onDestroy(() => this.ws.close());
  }
}

// takeUntilDestroyed operator uses DestroyRef internally
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({ ... })
class FeedComponent {
  private feedService = inject(FeedService);

  ngOnInit() {
    this.feedService.getFeed()
      .pipe(takeUntilDestroyed())  // auto-completes when component is destroyed
      .subscribe(items => this.items = items);
  }
}

import { MetaReducer, ActionReducer } from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

// Meta-reducer 1: Logging
function loggerMetaReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return (state, action) => {
    console.group(action.type);
    console.log('%c prev state', 'color: #9E9E9E', state);
    console.log('%c action', 'color: #03A9F4', action);
    const nextState = reducer(state, action);
    console.log('%c next state', 'color: #4CAF50', nextState);
    console.groupEnd();
    return nextState;
  };
}

// Meta-reducer 2: State hydration from localStorage
function hydrationMetaReducer(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
  return (state, action) => {
    if (action.type === INIT || action.type === UPDATE) {
      const storageValue = localStorage.getItem('app_state');
      if (storageValue) {
        try {
          return JSON.parse(storageValue);
        } catch { /* invalid JSON */ }
      }
    }
    const nextState = reducer(state, action);
    localStorage.setItem('app_state', JSON.stringify(nextState));
    return nextState;
  };
}

// Register in provideStore:
export const metaReducers: MetaReducer<AppState>[] = isDevMode()
  ? [loggerMetaReducer, hydrationMetaReducer]
  : [hydrationMetaReducer];

provideStore(reducers, { metaReducers })