Dev.to

Fetching and Displaying Data in Angular Using httpResource

Handling data fetching and displaying in Angular applications is crucial for creating dynamic and interactive user experiences. In this blog post, we'll explore how to use httpResource to fetch data from an API and display it in a user-friendly format. We'll build a simple blog application that fetches posts from the JSONPlaceholder API and displays them in a grid layout. Project Overview We have built an Angular app that: Uses the Angular CLI (v19.2.0) for project setup. Fetches blog posts from the JSONPlaceholder API. Displays posts in a grid layout with error handling. Implements standalone components for cleaner architecture. Let's dive into the details! 1. Setting Up the Angular Project To create an Angular app, install the Angular CLI if you haven't already: npm install -g @angular/cli Then, generate a new project: ng new angular-examples cd angular-examples Start the development server: ng serve Now, open http://localhost:4200/ in your browser. 2. Creating the Blog Component The blog component fetches posts from JSONPlaceholder and displays them in a grid layout. Component Code: app.component.ts import { httpResource } from '@angular/common/http'; import { Component, computed, Resource } from '@angular/core'; export interface Post { userId: number; id: number; title: string; body: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { title = 'angular-blog'; apiUrl = 'https://jsonplaceholder.typicode.com'; posts = httpResource(`${this.apiUrl}/posts`); error = computed(() => { const error = this.posts.error() as Error; return error ? error.message : null; }); constructor() {} } Explanation We define a Post interface to model the API response. We use httpResource to fetch blog posts. computed() is used to handle API errors dynamically. 3. Displaying Blog Posts The fetched posts are displayed in the app.component.html file. Template Code: app.component.html Blog Posts @if (posts.isLoading()) { Loading posts... } @else { @if (error()) { Error loading posts: {{ error() }} } @else { @for (post of posts.value(); track post.id) { {{ post.title }} {{ post.body }} Post ID: {{ post.id }} } } } Key Features Displays a loading spinner while fetching posts. Shows an error message if the API request fails. Uses @for directive to iterate through posts and display them in a grid layout. 4. Styling the Blog We use CSS Grid to style the blog layout in app.component.css. .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 2rem; } .loading, .error { text-align: center; padding: 2rem; } .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .post-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.2s; } .post-card:hover { transform: translateY(-5px); } .post-card h2 { color: #2c3e50; font-size: 1.5rem; } .post-card p { color: #34495e; } This makes the blog responsive, visually appealing, and user-friendly. 5. Configuring Angular for API Calls To enable HTTP requests, update app.config.ts: import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter([]), provideHttpClient(), ], }; This configures Angular's HTTP client to handle API calls efficiently. 6. Running and Testing the App To test the application: ng serve Visit http://localhost:4200/ to see the blog posts rendered dynamically. Conclusion We have successfully built a simple Angular blog that: Fetches blog posts from an external API. Displays posts dynamically with error handling. Uses Angular standalone components for modularity. Features responsive styling with CSS Grid. Exploring the Code Visit the GitHub repository to explore the code in detail.

Feb 28, 2025 - 07:02
 0
Fetching and Displaying Data in Angular Using httpResource

Handling data fetching and displaying in Angular applications is crucial for creating dynamic and interactive user experiences. In this blog post, we'll explore how to use httpResource to fetch data from an API and display it in a user-friendly format.

We'll build a simple blog application that fetches posts from the JSONPlaceholder API and displays them in a grid layout.

Project Overview

We have built an Angular app that:

  • Uses the Angular CLI (v19.2.0) for project setup.
  • Fetches blog posts from the JSONPlaceholder API.
  • Displays posts in a grid layout with error handling.
  • Implements standalone components for cleaner architecture.

Let's dive into the details!

1. Setting Up the Angular Project

To create an Angular app, install the Angular CLI if you haven't already:

npm install -g @angular/cli

Then, generate a new project:

ng new angular-examples
cd angular-examples

Start the development server:

ng serve

Now, open http://localhost:4200/ in your browser.

2. Creating the Blog Component

The blog component fetches posts from JSONPlaceholder and displays them in a grid layout.

Component Code: app.component.ts 

import { httpResource } from '@angular/common/http';
import { Component, computed, Resource } from '@angular/core';

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'angular-blog';

  apiUrl = 'https://jsonplaceholder.typicode.com';

  posts = httpResource<Post[]>(`${this.apiUrl}/posts`);
  error = computed(() => {
    const error = this.posts.error() as Error;
    return error ? error.message : null;
  });

  constructor() {}
}

Explanation

  • We define a Post interface to model the API response.
  • We use httpResource to fetch blog posts.
  • computed() is used to handle API errors dynamically.

3. Displaying Blog Posts

The fetched posts are displayed in the app.component.html file.

Template Code: app.component.html 

 class="container">
  

    
Blog Posts

  


  @if (posts.isLoading()) {
     class="loading">
      
Loading posts...
       class="spinner">
} @else { @if (error()) { class="error">

Error loading posts: {{ error() }}