Example – Angular 17

In Angular 17, making an API call, reading its data, looping through it in the UI, and managing state is a typical process that involves services, observables, and Angular’s built-in HttpClient. I’ll provide a step-by-step guide and sample code to achieve this, reflecting the Angular 17 best practices.

Step-by-Step Guide:

1. Set up the service to handle API requests and state management.
2. Create a component to display the data.
3. Manage state using RxJS observables (e.g., BehaviorSubject).
4. Loop the data in the template using *ngFor.

Step 1: Setting Up HttpClient and DataService

First, set up the Angular service to handle API requests and manage the state. We’ll use BehaviorSubject to store the state and HttpClient to make API calls.

1.1 Install the required modules:

Ensure HttpClientModule is imported in your app.module.ts.

ng new angular-17-api-example
cd angular-17-api-example
ng add @angular-eslint/schematics # Optional, for linting setup

Then, inside app.module.ts:

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { PostListComponent } from './components/post-list/post-list.component';
import { DataService } from './services/data.service';

@NgModule({
  declarations: [
    AppComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

1.2 Creating the service for API calls and state management:

Create a service that handles API calls and stores the data in a BehaviorSubject, which allows state management across components.

// src/app/services/data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API
  private dataSubject = new BehaviorSubject<any[]>([]); // State management using BehaviorSubject

  constructor(private http: HttpClient) {}

  // Fetch data from API and update the state
  fetchData(): void {
    this.http.get<any[]>(this.apiUrl).subscribe(
      (data) => {
        this.dataSubject.next(data); // Update the state with the fetched data
      },
      (error) => {
        console.error('Error fetching data:', error);
      }
    );
  }

  // Expose the state to be used in other components as an Observable
  getData(): Observable<any[]> {
    return this.dataSubject.asObservable();
  }
}

Step 2: Creating the Component to Display the Data

2.1 Create a component where data will be displayed:

Use Angular CLI to generate the component where the data will be looped and displayed.

ng generate component components/post-list

Then, in the generated component, subscribe to the data from the service and display it in the template.

2.2 Subscribing to the data in the component:

// src/app/components/post-list/post-list.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {
  posts: any[] = []; // Holds the posts data

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // Fetch data when the component initializes
    this.dataService.fetchData();

    // Subscribe to the data observable to get posts data
    this.dataService.getData().subscribe((data) => {
      this.posts = data;
    });
  }
}

Step 3: Loop the Data in the UI Template

In the template (post-list.component.html), use Angular’s *ngFor directive to loop over the posts array and display the data.

<!-- src/app/components/post-list/post-list.component.html -->
<div *ngIf="posts.length === 0">Loading...</div>

<ul *ngIf="posts.length > 0">
  <li *ngFor="let post of posts">
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
  </li>
</ul>

Step 4: Managing State with BehaviorSubject

In the service, the BehaviorSubject is used to hold the state. This allows the getData() method to provide an observable, which can be subscribed to by any component. Whenever the API data is fetched or updated, all subscribing components will automatically get the new data.

Putting Everything Together:

AppComponent (Entry Point):

Make sure that AppComponent has a placeholder for the PostListComponent.

// src/app/app.component.html
<app-post-list></app-post-list>

Final File Structure:

src/
  app/
    components/
      post-list/
        post-list.component.ts
        post-list.component.html
    services/
      data.service.ts
    app.component.html
    app.module.ts

Running the Application

Once the code is in place, run the application:

ng serve

Output:

• Loading… message will be shown until the data is fetched from the API.
• The list of posts from the https://jsonplaceholder.typicode.com/posts API will be displayed, each containing a title and body.

How It Works:

1. Service (DataService):

• Handles the API call using HttpClient.
• Manages the state of the fetched data using BehaviorSubject.
• Exposes an observable (getData()) for components to subscribe to.

1. Component (PostListComponent):

• Fetches data when the component is initialized (ngOnInit).
• Subscribes to the data observable to receive updates whenever the data changes.
• Loops through the data using *ngFor in the template and displays the content.

Improvements:

• Error handling: You can add more robust error handling using catchError from RxJS.
• State management libraries: For larger applications, consider using a state management library like NgRx to handle more complex state transitions.
• Optimization: Implement a caching mechanism to avoid repeated API calls.

This example demonstrates a basic yet effective pattern to call an API, manage state, and display the data in an Angular 17 application.