Calling our GET endpoint in Angular

It's time to connect our Angular app to the .NET API. In this topic we'll add all the pieces needed to get data from our api and use/show it in an Angular component. We'll build an overview for all the available lego sets

Define API base URL

Instead of hardcoding URLs across your codebase, we'll add the API base URL in the .env. Get the URL from the API and add it to the .env of the Angular app:

NG_APP_LEGO_API_URL='https://localhost:7268'

Lego set interface

We already have a HTTP GET endpoint which returns lego sets. The DTO we created to send the data over the wire looks like this:

 public class LegoSetDto
 {
   public Guid Id { get; set; }
   public string Name { get; set; }
   public int NumberOfPieces { get; set; }
 }

This DTO is some sort of shared contract between backend and frontend. Therefore we need an interface in our Angular application that matches this DTO. This interface can be shared over different applications, so we'll put it in the shared/domain library:

//libs/shared/domain/src/lib/dtos/lego-set.ts
export interface LegoSet {
  id: string;
  name: string;
  numberOfPieces: number;
}

Make sure to expose this interface in the index.ts barrel file!

Create API client service

We do this in the app specific domain layer. We can use the Nx CLI to generate the service:

npx nx g @schematics/angular:service --project=swe-demo-domain --name=services/lego-set.service

import { Injectable } from "@angular/core";
import { LegoSet } from "@swe-monorepo/shared-domain";
import { httpResource } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class LegoSetService {
  private apiUrl = `${import.meta.env["NG_APP_LEGO_API_URL"]}`;

  newsItemsResource = httpResource<LegoSet[]>(
    () => `${this.apiUrl}/api/legoset`,
    {
      defaultValue: [],
    }
  );
}

This service uses the new httpResource API to declaratively fetch data from an HTTP endpoint — in this case, a list of LegoSet objects from your .NET API.

• httpResource is a new Angular signal-based utility for handling HTTP data declaratively
• It automatically manages:
  • Loading state (isLoading)
  • Error state (error)
  • Value state (value)
• It supports re-fetching (reload())
• It returns a WritableSignal of an array of LegoSet objects
• Before the HTTP request completes, the defaultValue is an empty array []

Make sure to expose this service in the index.ts barrel file!

Create the Lego sets overview feature component

For now we will create a feature component which will use the LegoSetService to get the lego sets.

nx g @nx/angular:component libs/swe-demo/feature/src/lib/lego-set-overview/lego-set-overview --selector lib-swe-demo-feature-lego-set-overview

Make sure to expose this component in the index.ts barrel file!

Add a base route to the app.routes.ts which points to this component:

//apps/swe-demo/src/app/app.routes.ts
import { Route } from "@angular/router";
import { LegoSetOverview } from "@swe-monorepo/swe-demo-feature";

export const appRoutes: Route[] = [{ path: "", component: LegoSetOverview }];

Inject the LegoSetService in the component and use it to read the lego sets

import { Component, inject } from "@angular/core";
import { LegoSetService } from "@swe-monorepo/swe-demo-domain";

@Component({
  selector: "lib-swe-demo-feature-lego-set-overview",
  imports: [],
  templateUrl: "./lego-set-overview.html",
  styleUrl: "./lego-set-overview.css",
})
export class LegoSetOverview {
  private readonly legoSetService = inject(LegoSetService);

  legoSets = this.legoSetService.legoSetsResource.value;
}

@for (item of legoSets(); track item.id) {
<div>
  <p>{{item.name}} - {{item.numberOfPieces}}</p>
</div>
}

httpclient error

app.config.ts

import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZoneChangeDetection,
} from "@angular/core";
import { provideRouter } from "@angular/router";
import { appRoutes } from "./app.routes";
import { provideHttpClient } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes),
    provideHttpClient(),
  ],
};

The lego sets are now shown on our page!