Angular Cheat Sheet – Quick Reference Guide for 2026

Estimated study time: 10 minutes.

A handy quick-reference for the Angular syntax and commands you'll use most often, whether you're just starting out or need a quick refresher.

Angular CLI Commands

ng new my-app              # create a new project
ng serve                   # run dev server
ng generate component foo  # generate a component
ng generate service bar    # generate a service
ng build                   # production build
ng test                    # run unit tests
ng add @angular/material   # add a library

Component Decorator

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {}

Data Binding Cheat Sheet

TypeSyntaxDirection
Interpolation{{ value }}Component → View
Property Binding[property]="value"Component → View
Event Binding(event)="handler()"View → Component
Two-Way Binding[(ngModel)]="value"Both

Common Directives

*ngIf="condition"
*ngFor="let item of items"
[ngClass]="{active: isActive}"
[ngStyle]="{color: textColor}"

Lifecycle Hooks (in order)

  • ngOnChanges()
  • ngOnInit()
  • ngDoCheck()
  • ngAfterContentInit()
  • ngAfterViewInit()
  • ngOnDestroy()

Dependency Injection

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}
}

Routing Basics

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];
💡 Tip: Bookmark this page — it's meant to be a fast lookup during development, not a full tutorial.

Ready to go beyond the basics?

Get hands-on training, live mentorship, and placement support with Uncodemy's Angular Training Course.

Explore Angular Training Course →