// profile.service.ts

import { Injectable, signal } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { catchError, retry, of } from 'rxjs';

@Injectable({

  providedIn: 'root',

})

export class ProfileService {

  userProfileSignal = signal<any | null>(null); // set null initial value

constructor(private http: HttpClient) {}

fetchProfile() {

    console.log('trigger fetchProfile');

    this.http

      .get<any>(https://jsonplaceholder.typicode.com/users)

      .pipe(

        retry(3),

        catchError((error) => {

          console.error('Error fetching profile:', error);

          return of(1);

        })

      )

      .subscribe((profile) => {

        // subscribe to a signal to receive updates.

        console.log('API Response:', profile);

        this.userProfileSignal.set(profile);

        console.log('set userProfileSignal', this.userProfileSignal);

      });

  }

}

// profile.component

import { Component, ChangeDetectionStrategy } from '@angular/core';

import { ProfileService } from './profile.service';

import { CommonModule } from '@angular/common';

import { HttpClientModule } from '@angular/common/http';

import { Observable, Subscription } from 'rxjs';

@Component({

  selector: 'app-profile-details',

  standalone: true,

  imports: [CommonModule, HttpClientModule],

  changeDetection: ChangeDetectionStrategy.OnPush,

  template: 

    <div *ngIf="userProfile">

        <div *ngFor="let profile of userProfile; let i = index">

        <h1>{{ profile.name }}</h1>

        <p>Username: {{ profile.username }}</p>

        <p>Email: {{ profile.email }}</p>

        <p>Address: {{ profile.address.street }}, {{ profile.address.suite }}, {{ profile.address.city }} {{ profile.address.zipcode }}</p>

        <p>Phone: {{ profile.phone }}</p>

        <p>Website: {{ profile.website }}</p>

        <p>Company: {{ profile.company.name }}</p>

        <hr *ngIf="i !== userProfile.length - 1" />

      </div>

      <hr />

    </div>

    <button (click)="fetchProfile()">Fetch Profile</button>

,

})

export class ProfileComponent {

  userProfile: any;

constructor(private profileService: ProfileService) {

    this.profileService.fetchProfile();

  }

fetchProfile() {

    this.userProfile = this.profileService.userProfileSignal();

    this.profileService.fetchProfile();

  }

}