Angular Cheatsheet — Complete Quick Reference (2026)

Q: What are Angular Signals and how do they differ from RxJS?

Angular Signals (`signal()`, `computed()`) provide fine-grained reactivity with automatic dependency tracking — they're synchronous and ideal for local state. RxJS manages async streams (HTTP, events) with operators. Signals can consume RxJS via `.toSignal()`, and RxJS can react to signals via `.fromSignal()`. They complement each other.

DodaTech Updated 2026-06-20 4 min read

In this tutorial, you'll learn about Angular Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Angular is a TypeScript-based web framework by Google that provides a full-featured platform with Dependency Injection, routing, forms, HttpClient, and powerful CLI tooling.

Component

import { Component, Input, Output, EventEmitter } from '@angular/core'

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<h1>{{ name }}</h1> <button (click)="sayHi()">Hi</button>`,
})
export class HelloComponent {
  @Input({ required: true }) name!: string
  @Output() greeted = new EventEmitter<string>()
  sayHi() { this.greeted.emit(this.name) }
}

Directives

<!-- Structural -->
<div *ngIf="visible">shown</div>
<div *ngFor="let item of items; trackBy: trackFn">{{ item.name }}</div>
<div [ngSwitch]="value">
  <p *ngSwitchCase="'a'">A</p>
  <p *ngSwitchDefault>Default</p>
</div>

<!-- Attribute -->
<div [ngClass]="{ active: isActive, disabled: isDisabled }">classes</div>
<div [ngStyle]="{ color: 'red', fontSize: '14px' }">styles</div>

Custom Directive

import { Directive, ElementRef, HostListener, Input } from '@angular/core'

@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  @Input() appHighlight = 'yellow'
  constructor(private el: ElementRef) {}
  @HostListener('mouseenter') onEnter() { this.el.nativeElement.style.background = this.appHighlight }
  @HostListener('mouseleave') onLeave() { this.el.nativeElement.style.background = '' }
}

Pipes

<p>{{ date | date:'fullDate' }}</p>
<p>{{ price | currency:'USD' }}</p>
<p>{{ text | uppercase }}</p>
<p>{{ obj | json }}</p>
<p>{{ 0.5 | percent }}</p>

// custom pipe
import { Pipe, PipeTransform } from '@angular/core'
@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 50): string {
    return value.length > limit ? value.slice(0, limit) + '...' : value
  }
}

Services & Dependency Injection

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
  getUsers() { return this.http.get<User[]>('/api/users') }
}

// component injecting
@Component({ ... })
export class UsersComponent {
  constructor(private userService: UserService) {}
  users$ = this.userService.getUsers()
}

Routing

// app.config.ts
import { provideRouter } from '@angular/router'
export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'user/:id', component: UserDetailComponent, canActivate: [authGuard] },
  { path: '**', component: NotFoundComponent },
]
export const appConfig = { providers: [provideRouter(routes)] }

// navigation
import { Router, ActivatedRoute } from '@angular/router'
constructor(private router: Router, private route: ActivatedRoute) {}
this.router.navigate(['/user', id])
this.route.params.subscribe(params => this.id = params['id'])

Template-Driven Forms

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <input name="email" ngModel required email #email="ngModel" />
  <div *ngIf="email.invalid && email.touched">Invalid email</div>
  <button [disabled]="form.invalid">Submit</button>
</form>

Reactive Forms

import { FormBuilder, Validators } from '@angular/forms'

@Component({ ... })
export class LoginComponent {
  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  })
  constructor(private fb: FormBuilder, private auth: AuthService) {}
  onSubmit() { if (this.form.valid) this.auth.login(this.form.value) }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email" />
  <div *ngIf="form.get('email')?.invalid && form.get('email')?.touched">Required</div>
  <button [disabled]="form.invalid">Login</button>
</form>

HttpClient

import { HttpClient } from '@angular/common/http'
import { inject } from '@angular/core'

export class DataService {
  private http = inject(HttpClient)
  getData() { return this.http.get<Data[]>('/api/data') }
  create(data: Data) { return this.http.post<Data>('/api/data', data) }
  update(id: number, data: Data) { return this.http.put<Data>(`/api/data/${id}`, data) }
  delete(id: number) { return this.http.delete(`/api/data/${id}`) }
}

Signals (Angular 16+)

import { signal, computed, effect } from '@angular/core'

export class CounterComponent {
  count = signal(0)
  doubled = computed(() => this.count() * 2)
  constructor() { effect(() => console.log(`Count: ${this.count()}`)) }
  increment() { this.count.update(c => c + 1) }
}

CLI Commands

Command	Description
`ng new project`	New Angular app
`ng generate component user`	Generate component
`ng generate service api`	Generate service
`ng generate pipe truncate`	Generate pipe
`ng generate directive highlight`	Generate directive
`ng serve`	Dev server (localhost:4200)
`ng build`	Production build
`ng build --configuration production`	Build with prod config
`ng test`	Run unit tests (Karma/Jest)
`ng add @<a href="/frameworks/angular/">Angular</a>/material`	Add Material UI

Must-Know Items

Standalone components (standalone: true) are the default since Angular 15 — no NgModules needed
inject() function alternative to constructor injection (usable in functions, guards)
Signals provide fine-grained reactivity — prefer signal() over [(ngModel)] for new code
async pipe {{ data$ | async }} auto-subscribes/unsubscribes Observables in templates
Use trackBy in *ngFor for better list rendering performance
providedIn: 'root' makes a service a Singleton across the app
HttpClient methods return Observables — use | async or .subscribe()
Prefer Reactive Forms for complex validation; template-driven for simple forms

{{< faq "What is the difference between standalone components and NgModules in Angular?">}}Standalone components (Angular 15+) are self-contained — they declare their own imports directly without NgModules. NgModules group components, directives, and pipes into modules. Standalone is the recommended default; NgModules remain useful for library packaging and lazy-loading module groups.{{< /faq >}}

What are Angular Signals and how do they differ from RxJS?

Angular Signals (signal(), computed()) provide fine-grained reactivity with automatic dependency tracking — they're synchronous and ideal for local state. RxJS manages async streams (HTTP, events) with operators. Signals can consume RxJS via .toSignal(), and RxJS can react to signals via .fromSignal(). They complement each other.

See full Angular tutorials for building enterprise web applications.

← Previous Vue.js Cheatsheet — Complete Quick Reference (2026) Next → Introduction to Cheatsheets — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Cheatsheets