AI Coding Assistants 1
▼
Uses GitHub Copilot for Angular code autocompletion: generating boilerplate component code, auto-completing TypeScript types and interfaces, suggestions for RxJS operators in Angular services.
Works effectively with Copilot in Angular projects: context setup via open files, generating tests for components and services, using Copilot Chat for refactoring and explaining complex RxJS code.
Optimizes Copilot usage for Angular: custom instructions via .github/copilot-instructions.md for Angular patterns, code review via Copilot, generating migration schematics and builders.
Manages Copilot adoption in the Angular team: licensing and organization setup, usage standards for Angular projects, productivity metrics, generated code review policy.
Algorithms & Data Structures 2
▼
Understands basic O(n) and O(1) complexity when working with collections in Angular components. Uses built-in array methods (filter, map, find) in templates and services, aware of their linear cost.
Optimizes data processing algorithms in Angular services, choosing appropriate structures for filtering and searching. Applies memoization via Angular signals and computed() to avoid repeated template computations.
Designs efficient algorithms for processing large lists in Angular: virtual scrolling via CDK, lazy data loading, and incremental rendering. Profiles bottlenecks via Angular DevTools.
Defines architectural algorithm performance standards for the Angular project. Reviews for suboptimal O(n²) operations in pipes, directives, and NgRx effect handlers.
Works with arrays and objects in Angular components for rendering lists via @for. Understands the difference between mutation and immutable data updates for correct OnPush change detection behavior.
Chooses optimal data structures for Angular services: Map for caching, Set for unique values, normalized objects for NgRx Store. Properly types collections via TypeScript generics.
Designs complex data structures for Angular applications: trees for navigation and nested components, dependency graphs for DI, normalized entity stores via @ngrx/entity.
Establishes data handling standards for the Angular project: state normalization in NgRx SignalStore, type-safe entity adapters, immutable update patterns for stable ChangeDetection behavior.
Angular Ecosystem 2
▼
Uses Angular Core at a basic level. Creates simple components from designs. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Angular Core. Optimizes rendering performance. Writes tests. Applies state management tools.
Designs frontend architecture with Angular Core. Optimizes bundle size and Core Web Vitals. Creates design systems and reusable components. Mentors the team.
Defines frontend architecture at the product level with Angular Core. Establishes standards and best practices. Conducts architectural reviews.
Uses RxJS and reactive programming at a basic level. Creates simple components from designs. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with RxJS and reactive programming. Optimizes rendering performance. Writes tests. Applies state management tools.
Designs frontend architecture with RxJS and reactive programming. Optimizes bundle size and Core Web Vitals. Creates design systems and reusable components. Mentors the team.
Defines frontend architecture at the product level with RxJS and reactive programming. Establishes standards and best practices. Conducts architectural reviews.
Build Tools & Bundling 1
▼
Understands the bundler's role in Angular CLI: esbuild as the default builder in Angular 17+. Knows the difference between dev server (fast rebuilds) and production build (optimization). Uses ng serve for development.
Configures Angular application builds: choosing between esbuild and webpack builder, customizing angular.json for optimization, configuring environment files, source maps, asset management, and style preprocessors.
Optimizes Angular build pipeline: custom webpack configurations via @angular-builders/custom-webpack, Module Federation for micro-frontends, CI build optimization through caching and parallelism.
Manages the Angular project's build infrastructure: migration to esbuild builder, Nx caching for monorepo, build configuration standardization, build time monitoring and optimization.
CI/CD 1
▼
Understands basic GitHub Actions for Angular: running lint, test, and build workflows, reading CI logs for Angular compilation failures, understanding workflow triggers for PR checks. Follows team conventions for Angular CI pipeline configuration.
Configures CI/CD for Angular: parallel jobs for lint/test/build, matrix strategy for different Node.js versions, Vercel/Netlify deployment, Angular CLI and Nx caching, PR checks with Lighthouse CI.
Designs CI/CD architecture for Angular: affected-based testing via Nx, Chromatic for visual regression, release automation via semantic-release, preview deployments for each PR.
Manages CI/CD infrastructure for the Angular project: pipeline time optimization, Nx Cloud for distributed execution, branch protection standards and required checks, CI performance monitoring and metrics.
Clean Code & Refactoring 1
▼
Follows the Angular style guide and configured ESLint rules. Uses Angular CLI for generating components, services, and modules with proper structure. Writes clear names for component properties and methods.
Configures ESLint with @angular-eslint for code quality. Applies strict TypeScript (strict mode), architectural import rules, automatic formatting via Prettier and lint-staged.
Designs quality control systems: custom ESLint rules for Angular architecture, enforcing boundaries between feature modules via Nx, coverage metrics for components and services.
Fosters a quality culture in the Angular team: automated CI checks via angular-eslint, architectural fitness functions, technical debt metrics, code review processes for Angular-specific patterns.
Code Review 1
▼
Participates in Angular code reviews: checks compliance with the Angular style guide, correctness of template bindings, proper use of component lifecycle hooks. Accepts feedback constructively.
Conducts Angular component code reviews: checks OnPush compatibility, RxJS subscription correctness, type safety, architectural patterns (smart/dumb components), test coverage, accessibility aspects.
Reviews architectural decisions in Angular: evaluating feature module structure, state management patterns, SSR compatibility, performance implications, security via DomSanitizer and CSP.
Builds the code review process for the Angular team: checklists for different PR types (feature, bugfix, migration), CODEOWNERS for Angular modules, review automation via angular-eslint and Danger.js.
Concurrency & Parallelism 1
▼
Understands promises and async/await for HTTP requests in Angular services. Uses basic RxJS operators (subscribe, pipe) and AsyncPipe in templates for automatic Observable unsubscription.
Confidently works with RxJS in Angular: switchMap for HTTP requests, combineLatest for stream merging, takeUntilDestroyed for subscription management. Migrates to Angular signals with toSignal/toObservable.
Designs complex reactive streams: race conditions via exhaustMap, API retry strategies, coordination between NgRx Effects and Angular signals. Creates custom RxJS operators for business logic.
Establishes async programming standards: when to use signals vs RxJS, error handling patterns in Effects, request cancellation strategies. Reviews for memory leaks.
CSS & Styling 3
▼
Uses ready-made Angular Material or ng-zorro-antd components in projects. Understands design system principles: consistency, component reuse, following color and typography guidelines.
Creates reusable Angular components for the design system: custom form controls via ControlValueAccessor, composable components with content projection (ng-content), documentation via Storybook.
Designs Angular design system architecture: standalone component library, theming via CSS Custom Properties, Angular CDK for behavioral primitives, auto-generated documentation.
Manages design system development for the Angular team: versioning via Nx libraries, RFC process for new components, Figma integration through design tokens, adoption metrics.
Applies modern CSS in Angular components: Flexbox and Grid for layout, CSS Custom Properties for themes, :host and ::ng-deep (carefully) for styling. Understands ViewEncapsulation modes.
Uses advanced CSS techniques: Container Queries for responsive components, CSS Layers for specificity management, animations via Angular Animations API, CSS-in-JS through styleUrls and inline styles.
Designs Angular application CSS architecture: ViewEncapsulation strategy, CSS Custom Properties for dynamic theming, performant animations via will-change and GPU layers, critical CSS for SSR.
Establishes CSS standards for the Angular project: style architecture (BEM vs utility), rules for ::ng-deep and ViewEncapsulation usage, CSS performance budgets, browser support strategy.
Applies Tailwind CSS utility classes in Angular templates for basic styling: colors, spacing, typography. Uses responsive prefixes (sm:, md:, lg:) and dark theme via the dark: modifier.
Configures Tailwind CSS for Angular projects: custom theme in tailwind.config, Angular Material integration via @apply, creating reusable utility classes, purge configuration for production.
Designs a Tailwind CSS design system in Angular: custom plugins for utility generation, ViewEncapsulation.None integration, dynamic theming via CSS variables and Tailwind, bundle size optimization.
Establishes Tailwind usage standards in the Angular team: naming conventions for custom classes, theme architecture, Angular CDK integration, style review process for component libraries.
Frontend Architecture 2
▼
Understands micro-frontends in Angular: knows the Module Federation plugin for Angular, understands the Angular Elements concept for Web Components. Knows that Angular's NgModule system naturally supports lazy-loaded feature modules as a step toward micro-frontends.
Works with micro-frontends in Angular: configures @angular-architects/module-federation for sharing Angular components, implements dynamic module federation for runtime discovery, creates Angular Elements for cross-framework integration. Manages shared Angular services via dependency injection.
Designs micro-frontend architecture on Angular: uses Nx workspace for monorepo management of micro-frontends, configures Angular CDK for consistent theming, designs shared library strategy via Nx publishable libraries. Ensures Angular version alignment between micro-frontends.
Standardizes the micro-frontend approach in Angular: creates Nx generators for scaffolding new MFEs, defines Angular upgrade strategy for coordinated version bumps, designs testing strategy (unit per MFE + integration shell). Trains teams on Angular-specific MFE patterns.
Understands SSR/SSG concepts and their benefits for Angular applications: SEO, First Contentful Paint. Knows about Angular Universal and basic server rendering setup via ng add @angular/ssr.
Configures Angular Universal for SSR: server routes, TransferState to avoid duplicate requests, browser-only API handling via isPlatformBrowser, static page prerendering via ng build --prerender.
Designs Angular application SSR architecture: hydration strategies (full vs partial), streaming SSR for improved TTFB, CDN-level caching, dynamic route handling, Angular Signals integration for server state.
Defines SSR standards for the Angular project: which routes to render server-side vs client-side, SSR page caching strategy, server performance monitoring, Angular Universal deployment process on Node.js.
Frontend Testing 2
▼
Writes basic unit tests for Angular components via TestBed: render verification, @Input binding, @Output emission. Uses ComponentFixture and DebugElement for DOM access in tests.
Tests Angular components with dependencies: mocking services via TestBed.overrideProvider, testing reactive forms, components with NgRx via provideMockStore, Angular Testing Library for user-centric tests.
Designs component testing strategy: harnesses for Angular Material, custom test utilities and page objects, Cypress Component Testing integration, testing standalone components without TestBed.
Implements component testing standards in the team: minimum coverage per component, test templates for different component types (form, list, dialog), test quality metrics.
Understands the concept of visual regression testing for Angular components. Takes component screenshots via Storybook, knows about font and animation issues in visual comparison.
Configures visual testing for Angular components: Chromatic or Percy integration with Storybook, testing various component states, responsive screenshots for different viewports.
Designs visual testing system: coverage of all design system components, Playwright integration for full-page screenshots, baseline management strategy, dark theme and RTL testing.
Implements visual testing process in the Angular team: CI-integrated visual diff in PR review, visual change approval policy, budgets for the number of changed screenshots per release.
Git & Workflows 1
▼
Uses basic Git operations for Angular projects: commits with conventional commits (feat, fix, refactor), feature branching, pull requests, resolving simple merge conflicts in components.
Applies advanced Git for Angular: interactive rebase for clean history, cherry-pick for hotfixes, git bisect for regression finding, branching strategies (GitFlow/trunk-based) for Angular monorepo.
Optimizes Git workflow for Angular: git hooks for pre-commit checks (lint, test affected), .gitattributes for Angular files, LFS strategy for assets, changelog automation via conventional-changelog.
Establishes Git standards for the Angular team: branch protection rules, conventional commits enforcement, branching strategy for Nx monorepo, release management process with semantic versioning.
OOP & Design Patterns 2
▼
Applies basic Angular patterns: component-based approach, dependency injection via constructor, smart/dumb component separation. Uses services as singletons via providedIn: root.
Uses GoF patterns in Angular context: Observer via RxJS/signals, Strategy via DI tokens, Facade for simplifying service APIs. Applies Container/Presentational component separation.
Designs architectural patterns for Angular: Feature Shell via standalone components, Mediator via NgRx Effects, Adapter for integrating third-party libraries with Angular DI and reactive stack.
Builds a recommended pattern catalog for the Angular team: SCAM (Single Component Angular Module), feature-based architecture, error handling patterns via HttpInterceptors and ErrorHandler.
Understands basic OOP concepts in TypeScript: classes, interfaces, decorators, generics. Applies simple SOLID principles following Angular project architecture. Follows team patterns for component/service class structure and Angular DI usage.
Independently applies OOP/SOLID in Angular/TypeScript: proper service encapsulation with DI, interface segregation for component contracts, single responsibility in directives and pipes. Understands trade-offs between class-based Angular architecture and reactive programming with RxJS.
Applies OOP/SOLID in Angular architecture: dependency injection with Angular's DI system, interface segregation for service contracts, single responsibility for component design. Designs modular Angular applications with proper use of modules, lazy loading, and clean separation between smart and presentational components.
Ensures SOLID principle adherence in the Angular codebase: Single Responsibility for components and services, Interface Segregation via abstract classes and InjectionToken, Open/Closed via DI providers.
Specialized Testing 1
▼
Understands basic accessibility testing concepts including WCAG guidelines, semantic HTML, and ARIA attributes in Angular templates. Follows team checklists for running axe-core audits and keyboard navigation tests on Angular components. Uses browser DevTools accessibility panels and Angular-specific linting rules to identify common a11y violations.
Independently writes accessibility tests for Angular components using Testing Library, axe-core integration, and Cypress/Playwright a11y plugins. Implements automated WCAG compliance checks in CI/CD pipelines for Angular applications. Tests screen reader compatibility with NVDA/VoiceOver for Angular Material components and custom widgets including focus management and live regions.
Designs comprehensive accessibility testing strategies for Angular application suites covering WCAG 2.1 AA/AAA compliance. Implements advanced testing patterns including automated color contrast validation, dynamic content announcement testing, and complex widget interaction verification with assistive technologies. Optimizes a11y test coverage by combining automated scanning, manual audit protocols, and user testing with assistive technology users for Angular enterprise applications.
Defines accessibility testing standards and quality gates for Angular projects across the organization. Establishes automated a11y testing pipelines, screen reader testing protocols, and WCAG compliance audit workflows for Angular component libraries. Conducts architecture reviews ensuring Angular applications meet accessibility requirements and mentors teams on inclusive design testing practices.
State Management 2
▼
Uses HttpClient for GET/POST requests in Angular services. Applies response typing via generics, handles errors with catchError, displays loading states in templates.
Implements advanced data fetching patterns: caching via shareReplay, request cancellation via switchMap, pagination and infinite scroll, parallel requests via forkJoin, retry strategies.
Designs data layer architecture in Angular: abstract data services, HttpInterceptors for authentication and caching, optimistic updates via NgRx, offline data strategy with background sync.
Establishes data handling standards: API layer abstraction for the Angular project, auto-generating HTTP services from OpenAPI, caching strategies (SWR-like), request monitoring and logging.
Manages state in Angular via services with BehaviorSubject and Angular signals. Understands the difference between local component state and global application state. Uses @Input/@Output for communication.
Applies NgRx for state management: Store for global state, createFeature for feature state, Effects for side effects. Migrates to NgRx SignalStore for simpler cases.
Designs Angular application state architecture: separating UI/domain/server state, NgRx Entity for normalization, SignalStore with patchState for local state, selectSignal optimization.
Defines state management standards: when to use services vs NgRx vs SignalStore, server state handling patterns, migration strategy to signal-based state management, NgRx pattern code reviews.
Type Systems 1
▼
Uses basic TypeScript types in Angular components: interfaces for data models, typed @Input/@Output, strict HTTP response typing via HttpClient.get<T>(). Avoids using any.
Applies advanced typing: generic services, strictly typed forms (Typed Reactive Forms), discriminated unions for component states, typed NgRx actions and selectors.
Designs type-safe APIs for Angular libraries: conditional types for DI tokens, template literal types for routing, branded types for business domain values, dynamic component typing.
Ensures maximum type safety in the Angular project: strict TypeScript and Angular compiler mode, typed interceptors and guards, auto-generated types from OpenAPI schemas for HttpClient.
Web Performance 2
▼
Understands bundle size impact on Angular application performance. Uses ng build --configuration production for tree-shaking and minification. Analyzes bundles with source-map-explorer.
Optimizes Angular application bundles: code splitting via lazy-loaded routes, dynamic imports for heavy libraries, analysis via webpack-bundle-analyzer, removing unused Angular modules and providers.
Designs bundle optimization strategy: granular code splitting via standalone components, secondary entry points for libraries, differential loading, preloading strategies (PreloadAllModules, custom).
Implements bundle size control: performance budgets in angular.json, CI checks via bundlesize, regression monitoring, import standards to prevent accidental bundle growth.
Understands Core Web Vitals metrics (LCP, FID, CLS) and their measurement for Angular applications. Uses Chrome DevTools and Lighthouse for basic Angular component performance diagnostics.
Optimizes Core Web Vitals in Angular: lazy loading via @defer blocks for improved LCP, trackBy in @for for stable CLS, ChangeDetectionStrategy.OnPush for reduced INP, NgOptimizedImage for images.
Designs Core Web Vitals monitoring system: web-vitals library integration in Angular, Real User Monitoring via Angular performance API, SSR with Angular Universal for LCP optimization, performance budgets in CI.
Sets performance standards for the Angular project: CWV target values per route, Lighthouse CI automation, PR impact review process for metrics, performance dashboards.
Web Standards & APIs 4
▼
Understands PWA fundamentals including service workers and web app manifests in Angular. Uses Angular CLI to generate PWA scaffolding with @angular/pwa. Follows offline-first caching strategies from documentation.
Configures advanced PWA features in Angular: caching strategies in ngsw-config.json (freshness vs performance), push notifications via SwPush, background data sync, App Shell for fast startup.
Designs Angular application PWA architecture: offline-first strategy with IndexedDB, custom service worker for complex caching logic, background sync via Angular Service Worker, Lighthouse PWA score optimization.
Defines PWA standards for the Angular project: app update strategies (SwUpdate), caching policies for different content types, PWA engagement metrics, offline scenario testing process.
Applies basic accessibility in Angular templates: semantic HTML, alt for images, ARIA attributes via attribute binding, using Angular Material components with built-in a11y support.
Implements accessible Angular components: uses CDK a11y (FocusTrap, LiveAnnouncer, ListKeyManager) for complex patterns, implements keyboard navigation via HostListener, configures angular-eslint accessibility rules. Tests with @angular/cdk/testing and jest-axe.
Designs accessible Angular architecture: creates accessible component library on Angular CDK, configures automated a11y testing via Protractor/Playwright + axe-core, implements route-level focus management. Ensures accessible forms with Reactive Forms and custom validators.
Standardizes accessibility in the Angular ecosystem: defines a11y requirements for Angular Material theme, creates custom schematics for accessible component scaffolding, designs a11y testing pipeline. Trains Angular teams on CDK a11y best practices.
Uses basic Web APIs in Angular components: localStorage/sessionStorage for state, Fetch API via HttpClient, DOM API via ElementRef and Renderer2 instead of direct document access.
Applies modern Web APIs in Angular services: IntersectionObserver for lazy-loading components, ResizeObserver for responsiveness, Clipboard API, Web Storage with typing via generic services.
Integrates advanced Web APIs in Angular: Web Workers via Angular CLI, SharedArrayBuffer for computations, WebSocket via RxJS webSocket(), Broadcast Channel for cross-tab communication.
Establishes Web API usage standards in the Angular team: abstractions via DI tokens (DOCUMENT, PLATFORM_ID), SSR compatibility via isPlatformBrowser, feature detection for progressive enhancement.
Understands the Web Components concept and its relation to Angular Elements. Uses third-party Web Components in Angular templates via CUSTOM_ELEMENTS_SCHEMA in component metadata.
Creates Angular Elements for use outside Angular: packaging standalone components as Custom Elements, data passing via attributes/properties, event handling via CustomEvent.
Designs Angular Elements architecture for cross-framework integration: Shadow DOM strategies, lazy-loading Angular Elements, bundle size optimization for widgets, styling via CSS Parts.
Manages Web Components strategy in the Angular project: standards for creating Angular Elements for micro-frontends, versioning and npm publishing, integration with non-Angular applications.