Angular Cheat Sheet

Component Structure

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

@Component({
  selector: 'app-hello',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  `,
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  title = 'Hello Angular';
  message = 'Welcome!';

  onClick() {
    console.log('Clicked!');
  }
}

Template Syntax

<!-- Interpolation -->
<p>{{ message }}</p>

<!-- Property Binding -->
<img [src]="imageUrl" [alt]="imageAlt">

<!-- Event Binding -->
<button (click)="onClick()">Click</button>

<!-- Two-way Binding -->
<input [(ngModel)]="name">

<!-- Structural Directives -->
<div *ngIf="isVisible">Visible</div>
<div *ngFor="let item of items">{{ item }}</div>

<!-- Class & Style Binding -->
<div [class.active]="isActive"></div>
<div [style.color]="textColor"></div>

Services & Dependency Injection

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

// Using in component
export class MyComponent {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      console.log(data);
    });
  }
}

Lifecycle Hooks

Common Directives