Angular Coding Questions

Declare a standalone Angular component.

@Component({
  selector: "app-hello",
  standalone: true,
  template: `<p>Hello {{ name }}</p>`,
})
export class HelloComponent {
  name = "Angular";
}

Accept an input with input().

import { Component, input } from "@angular/core";
export class CardComponent {
  title = input.required<string>();
}

Emit an event with output().

import { output } from "@angular/core";
export class SaveButton {
  saved = output<void>();
  onClick() {
    this.saved.emit();
  }
}

Fetch users with HttpClient.

constructor(private http: HttpClient) {}
load() {
  return this.http.get<User[]>("/api/users");
}

Build a FormGroup with validators.

form = new FormGroup({
  email: new FormControl("", [Validators.required, Validators.email]),
});

Read an id route param.

id = inject(ActivatedRoute).snapshot.paramMap.get("id");

Render an observable list with async pipe.

<li *ngFor="let user of users$ | async">{{ user.name }}</li>

Inject a service with inject().

private readonly api = inject(ApiService);

Derive a value with computed().

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

Conditionally render with @if.

@if (user) {
  <p>{{ user.name }}</p>
} @else {
  <p>Guest</p>
}

Use track in @for.

@for (item of items; track item.id) {
  <div>{{ item.label }}</div>
}

Add an auth header interceptor.

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

Protect a route with a functional guard.

export const authGuard: CanActivateFn = () => {
  return inject(AuthService).isLoggedIn() || inject(Router).parseUrl("/login");
};

Set OnPush change detection.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class FastComponent {}

Clean up a subscription with DestroyRef.

const destroyRef = inject(DestroyRef);
const sub = source$.subscribe();
destroyRef.onDestroy(() => sub.unsubscribe());