Algorithms & Data Structures 1
▼
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.
Establishes data handling standards for the Angular project: state normalization in NgRx SignalStore, type-safe entity adapters, immutable update patterns for stable ChangeDetection behavior.
Develops platform solutions for data management: custom entity adapters for NgRx, structures for offline-first via IndexedDB, CRDT-like models for collaborative Angular applications.
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.
Defines frontend architecture at the product level with Angular Core. Establishes standards and best practices. Conducts architectural reviews.
Defines Angular platform technology strategy for 2-3 years: planning migration to signal-based components, zoneless Angular, server components. Influences the Angular ecosystem through RFCs and open-source contributions.
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.
Defines frontend architecture at the product level with RxJS and reactive programming. Establishes standards and best practices. Conducts architectural reviews.
Shapes reactive programming strategy: balancing RxJS and Angular signals, migration plan for complex Observable chains to signal-based approach, custom reactive primitives for specific business tasks.
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.
Manages the Angular project's build infrastructure: migration to esbuild builder, Nx caching for monorepo, build configuration standardization, build time monitoring and optimization.
Defines build strategy at the Angular platform level: monorepo architecture via Nx, distributed task execution, custom builders for specific requirements, cloud caching integration.
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.
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.
Shapes code quality strategy at the organizational level: unified Angular standards via Nx workspace, shared ESLint configs, migration automation via ng update schematics, codebase health metrics.
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.
Manages design system development for the Angular team: versioning via Nx libraries, RFC process for new components, Figma integration through design tokens, adoption metrics.
Defines design system strategy at the organizational level: multi-platform system (Angular + mobile), micro-frontend compatibility, Web Components for cross-framework reusability.
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.
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.
Shapes CSS strategy at the Angular platform level: unified design token system, CSS Houdini for custom properties, CSS layers integration with micro-frontend architecture and Angular Elements.
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.
Establishes Tailwind usage standards in the Angular team: naming conventions for custom classes, theme architecture, Angular CDK integration, style review process for component libraries.
Defines Angular platform styling strategy: choosing between Tailwind, Angular Material, and custom systems, scaling design tokens via Tailwind config for multi-brand projects.
Frontend Architecture 1
▼
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.
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.
Shapes rendering strategy at the Angular platform level: edge-side rendering, Cloudflare Workers/Vercel Edge integration, server components architecture for Angular, streaming SSR for real-time applications.
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.
Implements component testing standards in the team: minimum coverage per component, test templates for different component types (form, list, dialog), test quality metrics.
Shapes component testing strategy for the Angular platform: balancing unit/integration/e2e, contract testing between micro-frontends, AI test generation, mutation testing for test quality verification.
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.
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.
Defines visual quality strategy at the platform level: automated visual QA for Angular micro-frontends, AI-powered visual testing, integration with accessibility screenshots and performance visualization.
OOP & Design Patterns 1
▼
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.
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.
Defines the balance between OOP and functional approaches in Angular: abstract services for business logic, functional guards/resolvers/interceptors, composition via inject() function instead of inheritance.
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.
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.
Shapes the organization's accessibility testing strategy across Angular and frontend ecosystems, driving WCAG compliance as a core quality metric. Drives innovation in automated accessibility validation including AI-assisted a11y defect detection, visual regression testing for accessibility, and cross-platform assistive technology compatibility frameworks. Influences industry standards for frontend accessibility testing through community contributions and conference presentations.
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.
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.
Defines data-fetching strategy for the Angular platform: server-side data resolution via Angular Universal, streaming SSR for real-time data, edge caching, GraphQL integration with Apollo Angular.
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.
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.
Shapes state management strategy for the Angular platform: unifying approaches across teams, state separation in micro-frontends, cross-tab state synchronization, server state via Angular Universal.
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.
Implements bundle size control: performance budgets in angular.json, CI checks via bundlesize, regression monitoring, import standards to prevent accidental bundle growth.
Defines architectural decisions for minimal bundles at the platform level: micro-frontend strategy with shared dependencies, esbuild optimizations, tree-shakeable providers, polyfill strategy.
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.
Sets performance standards for the Angular project: CWV target values per route, Lighthouse CI automation, PR impact review process for metrics, performance dashboards.
Defines Angular platform performance strategy: architectural decisions for stable CWV (streaming SSR, partial hydration), influence on Angular roadmap, R&D of new optimizations.
Web Standards & APIs 3
▼
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.
Defines PWA standards for the Angular project: app update strategies (SwUpdate), caching policies for different content types, PWA engagement metrics, offline scenario testing process.
Shapes PWA strategy at the Angular platform level: offline-first architecture for critical business processes, native API integration (Web Share, Badging), cross-platform strategy with Angular + Capacitor/Ionic.
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.
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.
Defines Web API integration strategy at the Angular platform level: WebGPU for visualizations, Web Codecs for media, WASM integration through Angular services, cross-browser compatibility standards.
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.
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.
Defines micro-frontend architecture through Angular Elements and Web Components: federated modules, shared dependencies strategy, Module Federation and Native Federation integration.