HttpClient संदर्भ

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface User {
id: number;
name: string;
email: string;
}

@Component({
selector: 'app-user-list',
template: `     <h2>User List</h2>     <ul>       <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>     </ul>
`
})
export class UserListComponent implements OnInit {
users: User[] = [];

constructor(private http: HttpClient) {}

ngOnInit(): void {
this.fetchUsers().subscribe({
next: (data) => this.users = data,
error: (err) => console.error('Users loading failed', err)
});
}

fetchUsers(): Observable<User[]> {
return this.http.get<User[]>('[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)');
}
}

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

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

@Component({
selector: 'app-post-list',
template: `     <h2>Posts</h2>     <ul>       <li *ngFor="let post of posts">{{ post.title }}</li>     </ul>     <div *ngIf="errorMsg" class="error">{{ errorMsg }}</div>
`
})
export class PostListComponent implements OnInit {
posts: Post[] = [];
errorMsg: string = '';

constructor(private http: HttpClient) {}

ngOnInit(): void {
this.loadPosts();
}

loadPosts(): void {
this.http.get<Post[]>('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)')
.pipe(
catchError(err => {
this.errorMsg = 'Failed to load posts';
console.error(err);
return of([]);
})
)
.subscribe(data => this.posts = data);
}
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

interface Todo {
id: number;
title: string;
completed: boolean;
}

@Injectable({
providedIn: 'root'
})
export class TodoService {
private apiUrl = '[https://jsonplaceholder.typicode.com/todos](https://jsonplaceholder.typicode.com/todos)';

constructor(private http: HttpClient) {}

getTodos(): Observable<Todo[]> {
return this.http.get<Todo[]>(this.apiUrl, { headers: new HttpHeaders({ 'Accept': 'application/json' }) })
.pipe(
retry(3),
catchError(this.handleError)
);
}

private handleError(error: HttpErrorResponse) {
console.error('HTTP Error:', error);
return throwError(() => new Error('Error fetching todos. Please try again later.'));
}
}

import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';

@Component({
selector: 'app-todo-list',
template: `     <h2>Todo List</h2>     <ul>       <li *ngFor="let todo of todos">
{{ todo.title }} <span *ngIf="todo.completed">✔️</span>       </li>     </ul>     <div *ngIf="errorMsg">{{ errorMsg }}</div>
`
})
export class TodoListComponent implements OnInit {
todos: Todo[] = [];
errorMsg: string = '';

constructor(private todoService: TodoService) {}

ngOnInit(): void {
this.todoService.getTodos().subscribe({
next: (data) => this.todos = data,
error: (err) => this.errorMsg = err.message
});
}
}