Angular

@NgModule({
  declarations: [UserCardComponent],
  imports: [CommonModule],
  exports: [UserCardComponent],
})
export class UserCardModule {}

@Component({
  selector: "app-user-card",
  templateUrl: "./user-card.component.html",
})
export class UserCardComponent {
  @Input() user!: User;
}

import { Component, input } from "@angular/core";
import { CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-user-card",
  standalone: true,
  imports: [CurrencyPipe],
  template: `
    <div class="user-card">
      <h2>{{ user().name }}</h2>
      <p>{{ user().balance | currency }}</p>
    </div>
  `,
})

export class UserCardComponent {
  readonly user = input.required<User>();
}

@Component({ /* ... */ })
export class CartComponent implements OnInit, OnDestroy {
  private readonly itemsSubject = new BehaviorSubject<CartItem[]>([]);
  readonly items$ = this.itemsSubject.asObservable();
  readonly total$ = this.items$.pipe(
    map(items => items.reduce((sum, item) => sum + item.price * item.qty, 0))
  );

  private readonly destroy$ = new Subject<void>();

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

import { Component, signal, computed } from "@angular/core";
import { CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-cart",
  standalone: true,
  imports: [CurrencyPipe],
  template: `
    <p>Total: {{ total() | currency }}</p>
    <button (click)="clearCart()">Limpar</button>
  `,
})

export class CartComponent {
  readonly items = signal<CartItem[]>([]);
  readonly total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price * item.qty, 0)
  );

  addItem(item: CartItem): void {
    this.items.update(current => [...current, item]);
  }

  clearCart(): void {
    this.items.set([]);
  }
}

@Component({
  selector: "app-order-list",
  standalone: true,
  template: `...`,
})
export class OrderListComponent implements OnInit {
  orders: Order[] = [];

  constructor(private orderService: OrderService) {}

  ngOnInit(): void {
    this.orderService.listOrders().subscribe(orders => {
      this.orders = orders.filter(o => o.status !== "cancelled");
    });
  }

  cancelOrder(id: string): void {
    this.orderService.cancel(id).subscribe(() => {
      this.orders = this.orders.filter(o => o.id !== id);
    });
  }
}

// Smart Component
import { Component, computed, inject } from "@angular/core";
import { toSignal } from "@angular/core/rxjs-interop";
import { OrderListComponent } from "./order-list.component";

@Component({
  selector: "app-orders-page",
  standalone: true,
  imports: [OrderListComponent],
  template: `
    <app-order-list
      [orders]="activeOrders()"
      (cancel)="handleCancel($event)"
    />
  `,
})

export class OrdersPageComponent {
  private readonly orderService = inject(OrderService);

  private readonly orders$ = this.orderService.listOrders();
  readonly orders = toSignal(this.orders$, { initialValue: [] });
  readonly activeOrders = computed(() =>
    this.orders().filter(order => order.status !== "cancelled")
  );

  handleCancel(id: string): void {
    this.orderService.cancel(id).subscribe();
  }
}

// Dumb Component
@Component({
  selector: "app-order-list",
  standalone: true,
  imports: [CurrencyPipe],
  template: `
    <ul>
      @for (order of orders(); track order.id) {
        <li>
          {{ order.id }}: {{ order.total | currency }}
          <button (click)="cancel.emit(order.id)">Cancelar</button>
        </li>
      }
    </ul>
  `,
})

export class OrderListComponent {
  readonly orders = input.required<Order[]>();
  readonly cancel = output<string>();
}

@Injectable({ providedIn: "root" })
export class OrderService {
  constructor(private http: HttpClient, private auth: AuthService) {}

  getOrders() {
    return this.http.get("/api/orders");
  }
}

import { Injectable, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class OrderService {
  private readonly http = inject(HttpClient);

  listOrders(): Observable<Order[]> {
    const orders = this.http.get<Order[]>("/api/orders");
    return orders;
  }

  findById(id: string): Observable<Order> {
    const order = this.http.get<Order>(`/api/orders/${id}`);
    return order;
  }

  cancel(id: string): Observable<void> {
    const cancellation = this.http.delete<void>(`/api/orders/${id}`);
    return cancellation;
  }
}

@Component({ /* ... */ })
export class DashboardComponent implements OnInit {
  private readonly auth = inject(AuthService);
  private readonly router = inject(Router);

  ngOnInit(): void {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(["/login"]);
    }
  }
}

// guards/auth.guard.ts
import { inject } from "@angular/core";
import { CanActivateFn, Router } from "@angular/router";

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);

  if (!auth.isAuthenticated()) {
    const loginUrl = router.createUrlTree(["/login"]);
    return loginUrl;
  }

  const accessGranted = true;
  return accessGranted;
};

// guards/role.guard.ts
export function roleGuard(role: UserRole): CanActivateFn {
  return () => {
    const auth = inject(AuthService);
    const router = inject(Router);

    if (!auth.hasRole(role)) {
      const forbiddenUrl = router.createUrlTree(["/forbidden"]);
      return forbiddenUrl;
    }

    const accessGranted = true;
    return accessGranted;
  };
}

// app.routes.ts
export const routes: Routes = [
  {
    path: "dashboard",
    canActivate: [authGuard],
    children: [
      {
        path: "admin",
        canActivate: [roleGuard("admin")],
        children: [
          { path: "users", component: UsersPageComponent },
        ],
      },
      { path: "settings", component: SettingsPageComponent },
    ],
  },
];

@Component({ /* ... */ })
export class OrderDetailComponent implements OnInit {
  order: Order | null = null;

  private readonly route = inject(ActivatedRoute);
  private readonly orderService = inject(OrderService);

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get("id")!;
    this.orderService.findById(id).subscribe(order => {
      this.order = order;
    });
  }
}

// resolvers/order-detail.resolver.ts
import { inject } from "@angular/core";
import { ResolveFn } from "@angular/router";

export const orderDetailResolver: ResolveFn<Order> = (route) => {
  const id = route.paramMap.get("id")!;
  const orderService = inject(OrderService);
  const order = orderService.findById(id);
  return order;
};

// app.routes.ts
{
  path: "orders/:id",
  component: OrderDetailPageComponent,
  resolve: { order: orderDetailResolver },
}

// pages/order-detail.page.ts
import { Component, inject } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { toSignal } from "@angular/core/rxjs-interop";
import { map } from "rxjs";

@Component({
  selector: "app-order-detail-page",
  standalone: true,
  template: `
    @if (order()) {
      <app-order-detail [order]="order()!" />
    }
  `,
})

export class OrderDetailPageComponent {
  private readonly route = inject(ActivatedRoute);

  private readonly order$ = this.route.data.pipe(
    map(data => data["order"] as Order)
  );

  readonly order = toSignal(this.order$);
}

@Component({ /* ... */ })
export class LoginFormComponent {
  readonly form = new FormGroup({
    email: new FormControl(""),
    password: new FormControl(""),
  });

  submit(): void {
    const email = this.form.get("email")?.value; // string | null | undefined
    const password = this.form.get("password")?.value;
  }
}

import { Component, inject, signal } from "@angular/core";
import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";

@Component({
  selector: "app-login-form",
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <fieldset [disabled]="isSubmitting()">
        <input formControlName="email" type="email" aria-describedby="email-error" />
        @if (form.controls.email.invalid && form.controls.email.touched) {
          <span id="email-error">E-mail inválido.</span>
        }

        <input formControlName="password" type="password" />

        @if (formError()) {
          <p role="alert">{{ formError() }}</p>
        }

        <button type="submit">
          {{ isSubmitting() ? "Entrando..." : "Entrar" }}
        </button>
      </fieldset>
    </form>
  `,
})

export class LoginFormComponent {
  private readonly formBuilder = inject(FormBuilder);
  private readonly authService = inject(AuthService);

  readonly isSubmitting = signal(false);
  readonly formError = signal<string | null>(null);

  readonly form = this.formBuilder.group({
    email: ["", [Validators.required, Validators.email]],
    password: ["", [Validators.required, Validators.minLength(8)]],
  });

  submit(): void {
    if (this.form.invalid) return;

    const { email, password } = this.form.getRawValue();
    const credentials = { email: email!, password: password! };

    this.isSubmitting.set(true);
    this.formError.set(null);

    this.authService.login(credentials).subscribe({
      next: () => this.isSubmitting.set(false),
      error: () => {
        this.formError.set("E-mail ou senha inválidos.");
        this.isSubmitting.set(false);
      },
    });
  }
}

@Injectable({ providedIn: "root" })
export class OrderService {
  private readonly http = inject(HttpClient);
  private readonly auth = inject(AuthService);

  listOrders(): Observable<Order[]> {
    const token = this.auth.getToken();
    const headers = { Authorization: `Bearer ${token}` };
    const orders = this.http.get<Order[]>("/api/orders", { headers });

    return orders;
  }
}

// interceptors/auth.interceptor.ts
import { HttpInterceptorFn, HttpRequest, HttpHandlerFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (
  request: HttpRequest<unknown>,
  next: HttpHandlerFn
) => {
  const auth = inject(AuthService);
  const token = auth.getToken();

  if (!token) {
    const unauthenticatedResponse = next(request);
    return unauthenticatedResponse;
  }

  const authenticatedRequest = request.clone({
    headers: request.headers.set("Authorization", `Bearer ${token}`),
  });

  const authenticatedResponse = next(authenticatedRequest);
  return authenticatedResponse;
};

// app.config.ts
import { provideHttpClient, withInterceptors } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
};

// interceptors/error.interceptor.ts
import { HttpInterceptorFn, HttpRequest, HttpHandlerFn, HttpErrorResponse } from "@angular/common/http";
import { inject } from "@angular/core";
import { catchError, throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (
  request: HttpRequest<unknown>,
  next: HttpHandlerFn
) => {
  const auth = inject(AuthService);
  const router = inject(Router);

  return next(request).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        auth.clearSession();
        router.navigate(["/login"]);
      }

      return throwError(() => error);
    })
  );
};