Card detail

The CardDetailService is an Angular service designed to manage card details and related states. It is provided at the root level, making it accessible across the application. This service is suitable for both internal use within the library and for external consumers of the library.

---

Features

• Centralized management of card details.
• Reactive signals for real-time UI updates.
• Handles loading states for asynchronous operations.
• Integrates with other services for HTTP requests and company identity.

---

Methods and Properties

cardDetails (private)

• Type: Signal<Card>
• Description: Holds the current active card details as a reactive signal. Updates are reflected automatically where this signal is used.

---

loading (public)

• Type: Signal<boolean>
• Description: Indicates the loading state during card detail requests. Can be used to show loading indicators in the UI.

---

set(cardId: Card["id"]) (public)

• Description: Sets the card details based on the provided card ID by triggering an HTTP request.
• Parameters:
  • cardId (Card["id"]): The ID of the card to fetch details for.
• Usage:

  cardDetailService.set('12345');

---

update(card: Card) (public)

• Description: Updates the current card details without making an HTTP request.
• Parameters:
  • card (Card): The card object with updated details.
• Usage:

  cardDetailService.update({ id: '12345', name: 'New Card Name' });

---

get() (public)

• Description: Retrieves the current card details synchronously.
• Returns: (Card) - The current card details.
• Usage:

  const card = cardDetailService.get();

---

getSignal() (public)

• Description: Provides a reactive signal for subscribing to card detail changes.
• Returns: (Signal<Card>) - The reactive signal for card details.
• Usage:

  const cardSignal = cardDetailService.getSignal();

---

request(cardId: Card["id"]) (private)

• Description: Fetches card details from the server for the given card ID.
• Parameters:
  • cardId (Card["id"]): The ID of the card to fetch details for.
• Returns: (Observable<Card>) - An observable that emits the card details.
• Throws: Error if the company identity is not found.
• Usage: (Internal only)

---

Usage Example

Injecting the Service

import { Component } from '@angular/core';
import { CardDetailService } from './path-to-service';

@Component({
  selector: 'app-card-details',
  template: `
    <div *ngIf="loading(); else details">
      Loading...
    </div>
    <ng-template #details>
      <p>Card Details: {{ cardDetails()?.hold_name }}</p>
    </ng-template>
  `,
})
export class CardDetailsComponent {
  cardDetails = this.cardDetailService.getSignal();
  loading = this.cardDetailService.loading;

  constructor(private cardDetailService: CardDetailService) {
    this.cardDetailService.set('12345');
  }
}

---

Dependencies

• COMPANY_IDENTITY_CONFIGURATION_TOKEN: Provides the company identity configuration.

---

Error Handling

• Company identity not found: Throws an error if the COMPANY_IDENTITY_CONFIGURATION_TOKEN is missing or unavailable.

---

Notes

• This service uses Angular signals for reactive state management.
• It ensures cleanup of subscriptions using the DestroyController.

---