Angular 22 cheatsheet

Angular 22: Routing and forms

8 common Angular 22 tasks.

Define routes

Map URLs to components, with a redirect and a wildcard.

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/:id', component: UserComponent },
  { path: '**', component: NotFoundComponent },
];

Lazy-load a route

Load a component's code only when its route is visited.

{ path: 'admin', loadComponent: () => import('./admin').then((m) => m.AdminComponent) }

Link to a route

Navigate without a page reload and mark the active link.

<a routerLink="/users" routerLinkActive="active">Users</a>

Read a route parameter

Read :id from the URL as a signal-friendly input. Needs withComponentInputBinding().

id = input.required<string>();

Protect a route

Allow navigation only when a condition holds.

export const authGuard: CanActivateFn = () => inject(AuthService).isLoggedIn() || inject(Router).parseUrl('/login');

Build a reactive form

Define a form group with validators. Import ReactiveFormsModule.

form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
  password: new FormControl('', [Validators.required, Validators.minLength(8)]),
});

Bind a reactive form

Connect the form group to the template and submit it.

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email">
  <button [disabled]="form.invalid">Submit</button>
</form>

Bootstrap the app

Start the app with a root component and providers for routing and HTTP.

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes), provideHttpClient()],
});