Angular Cheat Sheet

By Syncfusion®, Inc. · Last updated November 6, 2026

A short reference of the whole course: structure, components, templates, binding, directives, pipes, forms, services, DI, routing, RxJS, HTTP, signals, state, render modes, security, errors and performance.

Angular Application Structure

Components

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-card',   // used as <app-product-card />
  imports: [CurrencyPipe],        // components, directives, pipes used in the template
  templateUrl: './product-card.html',
  styleUrl: './product-card.css',
})
export class ProductCard {
  name = 'Keyboard';
}

Templates

Data Binding

Directives and Pipes

@Pipe({ name: 'initials' })
export class InitialsPipe implements PipeTransform {
  transform(name: string) {
    return name.split(' ').map(part => part[0]).join('');
  }
}

Event Handling

Component Communication

// Child
@Input() product!: Product;                       // parent → child
@Output() added = new EventEmitter<Product>();    // child → parent
this.added.emit(this.product);

<!-- Parent -->
<app-product-card [product]="selected" (added)="addToCart($event)" />

<!-- Two-way: @Input() size + @Output() sizeChange -->
<app-font-size [(size)]="fontSize" />

Lifecycle Hooks

Template-Driven Forms and Reactive Forms

private fb = inject(FormBuilder);

form = this.fb.nonNullable.group({
  name: ['', Validators.required],
  phones: this.fb.array([this.fb.control('')]),
});

this.form.setValue({ ... });     // all values
this.form.patchValue({ name });  // some values
this.form.reset();
this.form.getRawValue();

Form Validation

// Custom validator: return null when valid
export function noSpaces(control: AbstractControl): ValidationErrors | null {
  return String(control.value ?? '').includes(' ') ? { noSpaces: true } : null;
}

control.hasError('minlength');
form.markAllAsTouched();          // show all messages on submit
control.setValidators([...]); control.updateValueAndValidity();

Services

@Injectable({ providedIn: 'root' })
export class CartService {
  private readonly _items = signal<string[]>([]);
  readonly items = this._items.asReadonly();

  add(item: string) {
    this._items.update(list => [...list, item]);
  }
}

// In a component
private cart = inject(CartService);

Dependency Injection

export const API_URL = new InjectionToken<string>('API_URL');
providers: [{ provide: API_URL, useValue: 'https://api.shop.com' }]
url = inject(API_URL);
analytics = inject(AnalyticsService, { optional: true });  // null if not provided

Routing

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: Home, title: 'Home' },
  { path: 'products/:id', component: ProductDetail },
  { path: 'settings', component: Settings, children: [{ path: 'profile', component: Profile }] },
  { path: 'admin', canActivate: [roleGuard], data: { roles: ['admin'] },
    loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES) },
  { path: 'reports', loadComponent: () => import('./reports/reports').then(m => m.Reports) },
  { path: '**', component: NotFound },
];

provideRouter(routes, withComponentInputBinding())

RxJS Fundamentals

API Integration

provideHttpClient(withInterceptors([authInterceptor]))

private http = inject(HttpClient);
this.http.get<User[]>('/api/users');
this.http.post<User>('/api/users', newUser);
this.http.put<User>(`/api/users/${user.id}`, user);
this.http.delete<void>(`/api/users/${id}`);
this.http.get('/api/users', { headers: new HttpHeaders({ 'Accept-Language': 'en' }) });

export const authInterceptor: HttpInterceptorFn = (req, next) =>
  next(req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }));

Angular Signals

count = signal(0);                                  // writable
count();                                            // read
count.set(5);                                       // replace
count.update(n => n + 1);                           // from the current value
items.update(list => [...list, item]);              // new list, never push()
double = computed(() => this.count() * 2);          // derived, read-only
effect(() => console.log(this.count()));            // side effect (in the constructor)
readonly value = this._value.asReadonly();          // read-only view

State Management

// NgRx
export const addItem = createAction('[Cart] Add Item', props<{ name: string }>());
export const cartReducer = createReducer(initialState, on(addItem, (s, a) => ({ items: [...s.items, a.name] })));
export const selectCount = createSelector(selectCart, cart => cart.items.length);
store.dispatch(addItem({ name: 'Pen' }));

Render Modes

// app.routes.server.ts
{ path: 'docs/:slug', renderMode: RenderMode.Prerender,
  async getPrerenderParams() { return DOCS.map(d => ({ slug: d.slug })); } }

provideClientHydration(withEventReplay())   // app.config.ts
isPlatformBrowser(inject(PLATFORM_ID))      // browser or server?
afterNextRender(() => { /* browser-only code */ });

User Access Control

export const authGuard: CanActivateFn = () =>
  inject(AuthService).isLoggedIn() ? true : inject(Router).createUrlTree(['/login']);

{ path: 'admin', component: Admin, canActivate: [roleGuard], data: { roles: ['admin'] } }

Always check permissions on the server too.

Error Handling

@Injectable()
export class AppErrorHandler implements ErrorHandler {
  handleError(error: unknown) {
    console.error(error);        // developers
    // log to a server, show a fallback message to users
  }
}

providers: [{ provide: ErrorHandler, useClass: AppErrorHandler }]

Look up NG error codes at angular.dev/errors.

Performance Optimization