angular-to-react-mapping

name	angular-to-react-mapping
description	Angular to React 18+ code mapping reference. Use when converting Angular code patterns to React equivalents including framework mapping, components, services, RxJS, routing, forms, and lifecycle methods.

Angular to React 18+ Mapping Reference

Use this skill when migrating Angular code to React 18+. It provides direct mappings for common patterns.

Framework Mapping

Angular	React Equivalent
Angular CLI project	Vite + React + TypeScript, or Next.js (App Router)
@NgModule (root/feature)	Route tree + component composition (no direct equivalent)
Angular Router	React Router v6+ (Vite) or Next.js file-based routing
Angular Universal (SSR)	Next.js (App Router with server components)
Angular Material	MUI (@mui/material), or keep existing styling
Angular Elements	Web Components via react-to-webcomponent (rare)

Architecture Pattern Mapping

Angular Pattern	React Equivalent
Module-based SPA (SCSS + Bootstrap)	Vite + React + TypeScript SPA
SSR with Angular Universal	Next.js App Router + Server Components
Micro-frontends via Module Federation	Next.js Multi-Zone, or Vite + Module Federation plugin
Component + Service DI	Function component + custom hooks (or Context/Redux for global state)

Component Mapping

Angular	React
@Component({ selector, templateUrl, styleUrls })	Function component + JSX + CSS import or CSS Module
@Input() prop: T	Props destructured from function args (function C({ prop }: { prop: T }))
@Output() event = new EventEmitter<T>()	Callback prop (onEvent: (payload: T) => void)
ViewChild / @ViewChild	useRef<T>()
ng-content (slots)	children prop, or named render props
ngOnInit()	useEffect(() => { ... }, [])
ngOnDestroy()	useEffect(() => { return () => cleanup(); }, [])
ngOnChanges()	useEffect(() => { ... }, [dep1, dep2])
ngAfterViewInit()	useLayoutEffect (after DOM mutation) or useEffect
Change detection (OnPush)	React.memo, useMemo, useCallback

Template Syntax Mapping

Angular Template	React JSX
{{ value }}	{value}
[prop]="value"	prop={value}
(event)="handler($event)"	onEvent={(e) => handler(e)}
[(ngModel)]="value"	value={value} onChange={(e) => setValue(e.target.value)}
*ngIf="cond"	{cond && <Comp />} or ternary
*ngIf="cond; else other"	{cond ? <A /> : <B />}
*ngFor="let item of items; trackBy: fn"	{items.map(item => <Row key={item.id} item={item} />)}
*ngSwitch / *ngSwitchCase	switch in a variable, or nested ternaries
[ngClass]="{ active: isActive }"	className={clsx('base', { active: isActive })} (via clsx/classnames)
[ngStyle]="{ color: c }"	style={{ color: c }}
<ng-container>	<> (Fragment) or <React.Fragment>
<ng-template #ref>	Render prop / component reference
[hidden]="cond"	style={{ display: cond ? 'none' : undefined }}
[innerHTML]="html"	dangerouslySetInnerHTML={{ __html: html }} (use sanitizer)
[routerLink]="['/path', id]"	<Link to={/path/${id}}> (react-router) / <Link href="/path/[id]"> (Next.js)

Pipes → Utilities

Angular Pipe	React Equivalent
{{ d | date:'mediumDate' }}	new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(d) or date-fns format
{{ n | currency:'USD':'symbol':'1.2-2' }}	new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n)
{{ n | number:'1.2-2' }}	new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n)
{{ n | percent }}	new Intl.NumberFormat('en-US', { style: 'percent' }).format(n)
{{ s | uppercase }} / | lowercase	s.toUpperCase() / s.toLowerCase()
{{ obj | json }}	JSON.stringify(obj, null, 2)
{{ obs | async }}	useQuery (TanStack Query) or useEffect + useState
Custom @Pipe	Plain TypeScript function, memoize with useMemo if expensive

Service & Dependency Injection Mapping

Angular	React
@Injectable({ providedIn: 'root' }) service	Custom hook (useEmployees) or singleton module
Constructor DI: constructor(private http: HttpClient)	Import client directly, or inject via useContext
HttpClient + Observable<T>	axios / fetch + TanStack Query (useQuery, useMutation)
Service subject/BehaviorSubject as global state	React Context + useReducer, Redux Toolkit, or Zustand
providers: [SomeService] at component	<SomeContext.Provider value={...}> wrapping subtree
@Inject(TOKEN)	useContext(SomeContext)
forwardRef	React.forwardRef (different concept — refs, not circular deps)

RxJS → Hooks Mapping

RxJS Pattern	React Equivalent
observable.subscribe(v => setState(v)) in ngOnInit	useEffect + useState, or useQuery (TanStack Query)
subscription.unsubscribe() in ngOnDestroy	Return cleanup fn from useEffect
BehaviorSubject for shared state	useState + Context, or Redux Toolkit / Zustand store
takeUntil(destroyed$) pattern	useEffect cleanup, or AbortController for fetch
combineLatest([a$, b$])	useMemo(() => derive(a, b), [a, b])
debounceTime(300) on input	useDebouncedValue custom hook, or useDeferredValue (React 18)
switchMap on search input	TanStack Query queryKey with debounced term, or manual AbortController
catchError	try/catch in async fn, or TanStack Query onError
retry(n)	TanStack Query retry: n option
Multicast subjects	Context / Zustand / Redux — RxJS is generally replaced, not ported

Rule of thumb: For API requests, migrate to TanStack Query (or RTK Query). For UI events, use plain React state. Keep RxJS only if the domain logic is genuinely stream-based (e.g., WebSocket firehoses).

Routing Mapping

Angular Router → React Router v6+ (Vite path)

Angular	React Router v6+
RouterModule.forRoot(routes)	<BrowserRouter> + <Routes> tree
{ path: 'employees', component: EmployeeListComponent }	<Route path="employees" element={<EmployeeList />} />
{ path: 'employees/edit/:id', component: EmployeeFormComponent }	<Route path="employees/edit/:id" element={<EmployeeForm />} />
{ path: '', redirectTo: '/employees', pathMatch: 'full' }	<Route index element={<Navigate to="/employees" replace />} />
{ path: '**', component: NotFoundComponent }	<Route path="*" element={<NotFound />} />
ActivatedRoute.params	const { id } = useParams<{ id: string }>()
ActivatedRoute.queryParams	const [searchParams] = useSearchParams()
Router.navigate(['/employees', id])	const navigate = useNavigate(); navigate(/employees/${id})
[routerLink]="['/employees', id]"	<Link to={/employees/${id}}>
[routerLinkActive]="'active'"	<NavLink className={({ isActive }) => isActive ? 'active' : ''}>
CanActivate guard	Wrapper component checking auth, redirect via <Navigate>
Resolver	Route loader (React Router 6.4+ data APIs) or fetch-on-mount
Lazy-loaded modules (loadChildren)	React.lazy(() => import('...')) + <Suspense>

Angular Router → Next.js file-based routing (Next.js path)

Angular	Next.js App Router
{ path: 'employees', ... }	app/employees/page.tsx
{ path: 'employees/edit/:id', ... }	app/employees/edit/[id]/page.tsx
Route parameter	export default function Page({ params }: { params: { id: string } })
Query parameters	searchParams prop (server) or useSearchParams() hook (client)
Layout module	app/layout.tsx (nested layouts supported)
Guards	Middleware (middleware.ts) or server-side check in layout.tsx
Lazy loading	Automatic per-route code splitting
RouterLink	<Link href="..."> from next/link
Programmatic nav	const router = useRouter(); router.push('/employees') from next/navigation

Forms Mapping

Reactive Forms → react-hook-form + zod

Angular Reactive Form	react-hook-form + zod
new FormGroup({ name: new FormControl('', Validators.required) })	useForm({ resolver: zodResolver(schema) }) with schema = z.object({ name: z.string().min(1) })
formGroup.get('name').value	watch('name') or getValues('name')
formGroup.get('name').invalid	formState.errors.name
formGroup.valid	formState.isValid
formGroup.markAllAsTouched()	trigger()
formGroup.reset(defaults)	reset(defaults)
formGroup.setValue({ ... })	setValue('field', value) or reset({ ... })
<form [formGroup]="form" (ngSubmit)="onSubmit()">	<form onSubmit={handleSubmit(onSubmit)}>
<input formControlName="name">	<input {...register('name')} />
Validators.required	z.string().min(1, 'Required')
Validators.minLength(3)	z.string().min(3)
Validators.email	z.string().email()
Validators.pattern(/re/)	z.string().regex(/re/)
Custom validator	.refine(v => check(v), 'Message') on zod schema
Async validator	.refine(async v => await check(v))
FormArray	useFieldArray
FormBuilder service	Direct schema definition (declarative)

Template-driven Forms → Controlled inputs

Angular Template Form	React
<input [(ngModel)]="name" required>	<input value={name} onChange={e => setName(e.target.value)} required />
#nameRef="ngModel"	Not needed — track validity with local state / react-hook-form

Lifecycle Mapping (detailed)

Angular Hook	React Equivalent	Notes
ngOnInit()	useEffect(() => { ... }, [])	Runs after mount
ngOnDestroy()	useEffect(() => { return () => cleanup(); }, [])	Cleanup on unmount
ngOnChanges(changes)	useEffect(() => { ... }, [prop1, prop2])	Runs when deps change
ngDoCheck()	No direct equivalent — React auto-tracks	Use React.memo for perf
ngAfterViewInit()	useLayoutEffect(() => { ... }, []) or useEffect	For DOM measurement
ngAfterViewChecked()	Rare — usually indicates design issue in React	Rethink approach
ngAfterContentInit()	N/A (React children is straightforward)	—

Package Mapping (npm)

Angular Package	React Equivalent
@angular/core + @angular/common + @angular/platform-browser	react + react-dom
@angular/router	react-router-dom (Vite) or built-in (Next.js)
@angular/forms	react-hook-form + zod
@angular/common/http (HttpClient)	axios + @tanstack/react-query
rxjs	Usually removed; keep only for genuine streaming use cases
@angular/material	@mui/material, @radix-ui/react-*, shadcn/ui, or chakra-ui
ngx-bootstrap / ng-bootstrap	react-bootstrap (matches this framework's default)
@ngrx/store	@reduxjs/toolkit + react-redux (or zustand)
@ngrx/effects	RTK Query, TanStack Query, or createAsyncThunk
@angular/animations	framer-motion or CSS transitions
@angular-devkit/build-angular	vite + @vitejs/plugin-react (Vite) or next (Next.js)
karma + jasmine	vitest + @testing-library/react + @testing-library/user-event
protractor (e2e)	@playwright/test or cypress
tslint (deprecated in Angular too)	eslint + @typescript-eslint + eslint-plugin-react
codelyzer	React-specific ESLint plugins (eslint-plugin-react-hooks)
zone.js	Not needed
ngx-translate	react-i18next or next-intl (Next.js)

Configuration Mapping

Angular	React
angular.json	vite.config.ts (Vite) or next.config.js (Next.js)
src/environments/environment.ts	.env.development + import.meta.env.VITE_* (Vite) or process.env.NEXT_PUBLIC_* (Next.js)
src/environments/environment.prod.ts	.env.production
tsconfig.app.json / tsconfig.spec.json	tsconfig.json + tsconfig.node.json (Vite)
proxy.conf.json	vite.config.ts server.proxy (Vite) or next.config.js rewrites() (Next.js)
polyfills.ts	Vite/Next.js include modern polyfills automatically; use core-js if you need IE support (rare)
main.ts	src/main.tsx (Vite) or Next.js has no equivalent (framework-managed)
index.html	index.html (Vite) or app/layout.tsx (Next.js)

Testing Mapping

Angular (Karma + Jasmine)	React (Vitest + RTL)
TestBed.configureTestingModule	render(<Comp />) from @testing-library/react
ComponentFixture.detectChanges()	Not needed — React re-renders automatically; use waitFor for async
fixture.debugElement.query(By.css('...'))	screen.getByRole / getByText / getByLabelText
HttpClientTestingModule + HttpTestingController	msw (Mock Service Worker) or manual vi.mock
spyOn(service, 'method').and.returnValue(...)	vi.spyOn(module, 'method').mockReturnValue(...)
fakeAsync + tick()	vi.useFakeTimers() + vi.advanceTimersByTime(n)
async / whenStable	await waitFor(() => { expect(...).toBe(...) })

Code Examples

See the examples directory for sample conversions:

• Component example — Angular component → React function component
• Service example — Angular service → custom hook with TanStack Query
• Form example — Reactive form → react-hook-form + zod