Services

Services are classes that handle business logic, data fetching, or any functionality that doesn't belong in components. Dependency Injection (DI) is Angular's way of providing instances of classes to components or other services. This promotes code reusability and testability by decoupling components from their dependencies.

Services

What is an Angular Service?

a service is to organize and share business logic, models, or data and functions with different components of an Angular application.

services are reusable singleton objects that are used to organize and share code across your app. They can be injected into controllers, filters, directives. AngularJS provides you three ways : service, factory and provider to create a service.

An Angular service is a singleton that can be wired with components or other services via Dependency Injection.

Components are responsible for the data that renders into the template. Having external services to draw upon can simplify this responsibility.
Services and dependency injection are very useful together. They allow developers to encapsulate common logic and inject across multiple different components.
This is a convenience for any future maintenance.

Injectors work as intermediaries. They mediate between instantiating components and a reservoir of registered services. Injectors offer these instantiable services to their branch children.

Services are elementary constructs of Angular. Any functionality that does not belong in a component will be implemented as a service. For cleaner code separation, we usually don’t use a component for code that fetches or manipulates data. Technically services are just plain TypeScript classes with a defined functionality. We focus on the service layer of domain-driven design which comprises application-, domain- and infrastructure services. Angular provides a dependency injection mechanism for instantiating and bootstrapping the required dependencies. The constructor injection pattern is the one enforced by Angular. To manage service scope and lifetime successfully we must comply to certain guidelines in place:

Normally, in Angular services are used to share state, beyond the lifetime of a component:

The logic of a service is distinct within its class. Angular interprets a class as an injectable service based off the @Injectable decorator. Injectable services must register with an injector.

Why use Service?

Services are used to create variables/data that can be shared and can be used outside the component in which it is defined. A service can be used by any component and thus it acts as a common data point from which data can be distributed to any component in the application.

Use Cases

To handle the features that are separate from components such as authentication, CRUD operations.
To share the data among various components in an Angular app.
To make the Testing and Debugging simple.
To write the re-usable code to centrally organize the application.
console logs
API requests

Fetch the JSON File in Your App

From your Angular app, you can use the HttpClient to make a GET request to the file’s URL in Firebase Storage.

1. Data Structure and Environment

This part remains largely the same, as it's a good practice independent of the Angular version.

Firebase JSON: Keep your JSON files organized on Firebase, as described previously.
Environment Configuration: Continue to use src/environments/environment.ts to centralize your base URL.

2. Angular Setup with Modern APIs

a. Providing the HttpClient

With standalone components being the new default, you no longer import HttpClientModule in a root module. Instead, you provide the HttpClient directly in your application's configuration.

In src/app/app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withFetch()), // Provides the HttpClient
  ],
};

Using withFetch() is a modern approach that leverages the native Fetch API, which can be more performant and is a recommended practice.

b. Create a Shared Data Service (Functional Approach)

While class-based services are still valid, you can also use a more functional approach with the inject function, which is a key part of the new functional APIs.

In src/app/data.service.ts:

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

export interface FeatureData {
  title: string;
  subcomponents?: any[];
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private http = inject(HttpClient);
  private baseUrl = environment.firebaseJsonBaseUrl;

  getFeatureData(featureName: string): Observable<FeatureData> {
    const url = `\\\${this.baseUrl}\\${featureName}.json`;
    return this.http.get<FeatureData>(url);
  }
}

The inject(HttpClient) function is a cleaner way to get the HttpClient instance without having to use the constructor.

3. Refactoring Your Feature Components (Standalone and Signals)

This is where the biggest updates come into play. Modern Angular encourages the use of standalone components and signals for state management, which simplifies component logic and improves performance.

a. Create a Generic Standalone Feature Component

ng generate component feature-shell --standalone

b. Update the Generic Component's TypeScript

You can use the new input() and computed() APIs for an even more declarative and reactive approach.

In src/app/feature-shell/feature-shell.component.ts:

import { Component, OnInit, inject, input, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common'; // Important for using async pipe and control flow
import { ActivatedRoute } from '@angular/router';
import { DataService, FeatureData } from '../data.service';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-feature-shell',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './feature-shell.component.html',
  styleUrls: ['./feature-shell.component.css'],
})
export class FeatureShellComponent {
  // Get the featureName from the route using the functional `inject`
  private route = inject(ActivatedRoute);
  private dataService = inject(DataService);

  // The new way to get route parameters and make them reactive
  featureName = toSignal(this.route.paramMap.pipe(
    map(params => params.get('featureName'))
  ));

  // Use a signal to hold the data, fetched reactively when the featureName signal changes
  featureData = toSignal(this.route.paramMap.pipe(
    map(params => params.get('featureName')),
    switchMap(featureName => this.dataService.getFeatureData(featureName as string))
  ));
}

This code snippet uses toSignal to convert the Observable from the route and the DataService into a signal. This is a very clean, declarative way to manage asynchronous data.

c. Update the Component's Template (New Control Flow)

With the move to standalone components, Angular 20 recommends the new built-in template control flow (@if, @for).

@if (featureData(); as data) {
  <h1>{{ data.title }}</h1>
  @if (data.subcomponents) {
    @for (sub of data.subcomponents; track sub.id) {
      <app-subcomponent [data]="sub"></app-subcomponent>
    }
  }
} @else {
  <p>Loading feature data...</p>
}

Notice the use of @if and @for instead of *ngIf and *ngFor. The () after featureData is how you read the value of a signal.

4. Setting Up Routing

The routing configuration remains mostly the same, but with the new standalone component, you don't need a module.

In src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { FeatureShellComponent } from './feature-shell/feature-shell.component';

export const routes: Routes = [
  { path: 'features/:featureName', component: FeatureShellComponent },
  { path: '', redirectTo: '/features/feature1', pathMatch: 'full' },
  // ... other routes
];

Summary of the Updated Angular 20 Solution

Functional APIs: Use provideHttpClient in app.config.ts and inject in your services and components.
Standalone Components: Your FeatureShellComponent should be standalone, with its dependencies imported directly.
Signals: Use signals with the toSignal helper to manage asynchronous data from your HTTP requests in a reactive and declarative way. This replaces the async pipe.
New Template Control Flow: Use the @if and @for syntax in your component templates for better performance and a cleaner syntax.

This updated approach aligns with the latest best practices and features of Angular 20, providing a more robust, performant, and maintainable solution.

You can learn more about using Angular's HttpClient in standalone components for API integration in this tutorial.

Lead Service for handling form submissions and lead tracking

/**
 * Lead data model for capturing basic contact information
 */
export interface LeadData {
  name: string;
  email: string;
  phone?: string;
  message?: string;
  source: string;
  type: string;
  timestamp: Date;
}

/**
 * Extended booking inquiry model with event details
 */
export interface BookingInquiry extends LeadData {
  eventType: string;
  eventDate: Date;
  eventLocation: string;
  estimatedGuests: number;
  musicPreferences?: string;
  specialRequests?: string;
  referralSource?: string;
  budget?: string;
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { delay, tap } from 'rxjs/operators';
import { LeadData, BookingInquiry } from '../models/lead.model';

@Injectable({
  providedIn: 'root'
})
export class LeadService {
  private apiUrl = 'api/leads'; // This would be replaced with actual API endpoint
  
  constructor(private http: HttpClient) {}
  
  /**
   * Submits basic lead data from quick contact forms
   * @param leadData The lead information to submit
   * @returns Observable with submission response
   */
  submitLead(leadData: LeadData): Observable<any> {
    // Add analytics tracking attributes
    this.trackLeadSubmission(leadData);
    
    // In a real implementation, this would send data to a backend API
    // For now, we'll simulate a successful response
    return of({ success: true, id: this.generateId() }).pipe(
      delay(500), // Simulate network delay
      tap(response => {
        // Add data attribute for successful submission tracking
        document.body.setAttribute('data-lead-submitted', 'true');
        document.body.setAttribute('data-lead-id', response.id);
      })
    );
  }
  
  /**
   * Submits detailed booking inquiry data
   * @param bookingData The booking inquiry information to submit
   * @returns Observable with submission response
   */
  submitBookingInquiry(bookingData: BookingInquiry): Observable<any> {
    // Add analytics tracking attributes
    this.trackBookingSubmission(bookingData);
    
    // In a real implementation, this would send data to a backend API
    return of({ success: true, id: this.generateId() }).pipe(
      delay(800), // Simulate network delay
      tap(response => {
        // Add data attribute for successful submission tracking
        document.body.setAttribute('data-booking-submitted', 'true');
        document.body.setAttribute('data-booking-id', response.id);
        document.body.setAttribute('data-event-type', bookingData.eventType);
      })
    );
  }
  
  /**
   * Adds tracking attributes for lead submissions
   */
  private trackLeadSubmission(leadData: LeadData): void {
    const formElement = document.querySelector(`form[data-form-type="\\\${leadData.type}"]`);
    if (formElement) {
      formElement.setAttribute('data-submission-attempt', 'true');
      formElement.setAttribute('data-source', leadData.source);
      formElement.setAttribute('data-timestamp', leadData.timestamp.toISOString());
    }
  }
  
  /**
   * Adds tracking attributes for booking submissions
   */
  private trackBookingSubmission(bookingData: BookingInquiry): void {
    const formElement = document.querySelector('form[data-form-type="booking"]');
    if (formElement) {
      formElement.setAttribute('data-submission-attempt', 'true');
      formElement.setAttribute('data-source', bookingData.source);
      formElement.setAttribute('data-event-type', bookingData.eventType);
      formElement.setAttribute('data-event-date', bookingData.eventDate.toISOString());
      formElement.setAttribute('data-timestamp', bookingData.timestamp.toISOString());
    }
  }
  
  /**
   * Generates a unique ID for lead tracking
   */
  private generateId(): string {
    return Math.random().toString(36).substring(2, 15);
  }
}

Table of Contents​

What is an Angular Service?​

Why use Service?​

Use Cases​

Fetch the JSON File in Your App​

1. Data Structure and Environment​

2. Angular Setup with Modern APIs​

3. Refactoring Your Feature Components (Standalone and Signals)​

4. Setting Up Routing​

Summary of the Updated Angular 20 Solution​

Lead Service for handling form submissions and lead tracking​

Table of Contents