Angular Cheat Sheet

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [CommonModule],
  template: `<h1>Hello {{ name() }}</h1>`,
})
export class HelloComponent {
  name = input<string>('World');
}

count = signal(0);
double = computed(() => this.count() * 2);

increment() { this.count.update(n => n + 1); }
reset() { this.count.set(0); }

constructor() {
  effect(() => console.log('Count:', this.count()));
}

// Signal-based (modern)
title = input.required<string>();
onSave = output<Post>();

// Decorator-based (classic)
@Input() title: string;
@Output() onSave = new EventEmitter<Post>();

<!-- Interpolation -->
<p>{{ title }}</p>
<!-- Property -->
<img [src]="imageUrl" />
<!-- Event -->
<button (click)="save()">Save</button>
<!-- Two-way -->
<input [(ngModel)]="name" />

@if (user()) {
  <p>Hello {{ user().name }}</p>
} @else {
  <p>Please log in</p>
}

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items</li>
}

{{ price | currency:'USD' }}
{{ date | date:'mediumDate' }}
{{ name | uppercase }}
{{ items | async }}
{{ data | json }}

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}

export class UserComponent {
  private userService = inject(UserService);
  private router = inject(Router);
  users = toSignal(this.userService.getUsers());
}

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'posts/:id', component: PostComponent },
  { path: 'admin', loadComponent: () =>
    import('./admin/admin.component').then(m => m.AdminComponent),
    canActivate: [authGuard]
  },
  { path: '**', redirectTo: '' },
];

<a routerLink="/posts" routerLinkActive="active">Posts</a>
<a [routerLink]="['/posts', post.id]">{{ post.title }}</a>

private router = inject(Router);
this.router.navigate(['/posts', id]);
this.router.navigate(['/search'], { queryParams: { q: 'angular' } });

private fb = inject(FormBuilder);
form = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  email: ['', [Validators.required, Validators.email]],
  role: ['user'],
});

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="name" />
  @if (form.get('name')?.errors?.['required']) {
    <span>Name required</span>
  }
  <button [disabled]="form.invalid">Submit</button>
</form>

onSubmit() {
  if (this.form.valid) {
    const data = this.form.getRawValue();
    this.userService.create(data).subscribe();
  }
}

private http = inject(HttpClient);

getPosts(): Observable<Post[]> {
  return this.http.get<Post[]>('/api/posts');
}

createPost(data: PostDTO): Observable<Post> {
  return this.http.post<Post>('/api/posts', data);
}

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};