Angular + ASP.NET Core API Project

1export const authInterceptor: HttpInterceptorFn = (req, next) => {
2  const token = inject(AuthStore).token();
3  return next(token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req);
4};

1// src/app/auth.ts
2import { HttpErrorResponse, type HttpInterceptorFn } from '@angular/common/http';
3import { inject, Injectable, signal } from '@angular/core';
4import { Router } from '@angular/router';
5import { catchError, throwError } from 'rxjs';
6

7@Injectable({ providedIn: 'root' })
8export class AuthStore {
9  readonly token = signal<string | null>(null);
10}
11

12export const authInterceptor: HttpInterceptorFn = (req, next) => {
13  const auth = inject(AuthStore);
14  const router = inject(Router);
15  const token = auth.token();
16  const authReq = token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req;
17  return next(authReq).pipe(
18    catchError((err: unknown) => {
19      if (err instanceof HttpErrorResponse && err.status === 401) {
20        auth.token.set(null);
21        void router.navigate(['/login']);
22      }
23      return throwError(() => err);
24    }),
25  );
26};
27

28// src/app/product.service.ts
29import { HttpClient } from '@angular/common/http';
30import { inject, Injectable } from '@angular/core';
31import { environment } from '../environments/environment';
32

33export interface Product { id: number; name: string; price: number }
34

35@Injectable({ providedIn: 'root' })
36export class ProductService {
37  private readonly http = inject(HttpClient);
38  private readonly url = `${environment.apiUrl}/api/products`;
39

40  list() { return this.http.get<Product[]>(this.url); }
41  create(input: { name: string; price: number }) { return this.http.post<Product>(this.url, input); }
42}
43

44// src/app/products.component.ts
45import { HttpErrorResponse } from '@angular/common/http';
46import { Component, inject, OnInit, signal } from '@angular/core';
47import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
48import { ProductService, type Product } from './product.service';
49

50@Component({
51  selector: 'app-products',
52  imports: [ReactiveFormsModule],
53  template: `
54    <h1>Products</h1>
55    @if (loading()) { <p>Loading products…</p> }
56    @if (loadError()) { <p role="alert">{{ loadError() }}</p> }
57    <ul>
58      @for (p of products(); track p.id) { <li>{{ p.name }} — ₹{{ p.price }}</li> }
59    </ul>
60

61    <form [formGroup]="form" (ngSubmit)="save()">
62      <label>Name <input formControlName="name" /></label>
63      @if (form.controls.name.errors?.['server']) { <small class="error">{{ form.controls.name.errors?.['server'] }}</small> }
64      <label>Price <input formControlName="price" type="number" /></label>
65      @if (form.controls.price.errors?.['server']) { <small class="error">{{ form.controls.price.errors?.['server'] }}</small> }
66      <button [disabled]="saving()">{{ saving() ? 'Saving…' : 'Add product' }}</button>
67    </form>
68  `,
69})
70export class ProductsComponent implements OnInit {
71  private readonly productsApi = inject(ProductService);
72  private readonly fb = inject(FormBuilder);
73

74  readonly products = signal<Product[]>([]);
75  readonly loading = signal(true);
76  readonly loadError = signal('');
77  readonly saving = signal(false);
78  readonly form = this.fb.nonNullable.group({
79    name: ['', Validators.required],
80    price: [0, [Validators.required, Validators.min(0.01)]],
81  });
82

83  ngOnInit() {
84    this.productsApi.list().subscribe({
85      next: list => { this.products.set(list); this.loading.set(false); },
86      error: () => { this.loadError.set('Could not load products.'); this.loading.set(false); },
87    });
88  }
89

90  save() {
91    this.saving.set(true);
92    this.productsApi.create(this.form.getRawValue()).subscribe({
93      next: created => {
94        this.products.update(list => [...list, created]);
95        this.form.reset();
96        this.saving.set(false);
97      },
98      error: (err: HttpErrorResponse) => {
99        this.saving.set(false);
100        if (err.status !== 400) return;
101        const errors: Record<string, string[]> = err.error?.errors ?? {};
102        for (const [field, messages] of Object.entries(errors)) {
103          const control = this.form.get(field.charAt(0).toLowerCase() + field.slice(1));   // "Name" → "name"
104          control?.setErrors({ server: messages[0] });
105        }
106      },
107    });
108  }
109}

With app.config.ts providing provideHttpClient(withInterceptors([authInterceptor])), the component lists products from the API. Saving an empty name shows “The Name field is required.” under the Name input — the message comes from the API’s problem details. A 401 clears the token and navigates to /login.