Skip to main content

​
Overview

The LocationsService is an Angular service that handles HTTP requests for location data. It provides methods to fetch states and cities with pagination and filtering capabilities. Location: src/app/features/paginator/services/locations.service.ts

​
Methods

​
getStates()

Retrieves all available states from the API. Signature: 
getStates(): Observable<StatesResponse>
Returns: Observable of StatesResponse Example: 
import { Component, OnInit } from '@angular/core';
import { LocationsService } from './services/locations.service';
import { State } from './types/location';

@Component({
  selector: 'app-state-selector',
  templateUrl: './state-selector.component.html'
})
export class StateSelectorComponent implements OnInit {
  states: State[] = [];

  constructor(private locationsService: LocationsService) {}

  ngOnInit(): void {
    this.locationsService.getStates().subscribe({
      next: (response) => {
        if (response.success) {
          this.states = response.data;
        }
      },
      error: (error) => console.error('Error fetching states:', error)
    });
  }
}

​
getCities()

Retrieves cities from the API with optional filtering and pagination. Signature: 
getCities(filters: CityFilters): Observable<CitiesResponse>
Parameters:
  • filters: CityFilters - Object containing filter criteria
    • state?: string - Filter by state code
    • pageSize?: number - Number of items per page
    • page?: number - Page number to retrieve
Returns: Observable of CitiesResponse Example: 
import { Component, OnInit } from '@angular/core';
import { LocationsService } from './services/locations.service';
import { City, CityFilters } from './types/location';

@Component({
  selector: 'app-city-list',
  templateUrl: './city-list.component.html'
})
export class CityListComponent implements OnInit {
  cities: City[] = [];
  totalRecords = 0;

  constructor(private locationsService: LocationsService) {}

  ngOnInit(): void {
    const filters: CityFilters = {
      state: '05',
      page: 1,
      pageSize: 10
    };

    this.locationsService.getCities(filters).subscribe({
      next: (response) => {
        if (response.success) {
          this.cities = response.data;
          this.totalRecords = response.totalRecords;
        }
      },
      error: (error) => console.error('Error fetching cities:', error)
    });
  }

  loadPage(page: number): void {
    const filters: CityFilters = { page, pageSize: 10 };
    this.locationsService.getCities(filters).subscribe({
      next: (response) => {
        if (response.success) {
          this.cities = response.data;
        }
      }
    });
  }
}

​
TypeScript Interfaces

​
CityFilters

export interface CityFilters {
  state?: string;
  pageSize?: number;
  page?: number;
}

​
StatesResponse

export interface StatesResponse {
  status: number;
  success: boolean;
  message: string;
  data: State[];
}

​
CitiesResponse

export interface CitiesResponse {
  status: number;
  success: boolean;
  message: string;
  totalRecords: number;
  data: City[];
  pagination: Pagination;
}

​
State

export interface State {
  id: string;
  state: string;
}

​
City

export interface City {
  city_dane_code: string;
  city: string;
  state_dane_code: string;
  state: string;
  id: string;
}

​
Pagination

export interface Pagination {
  total: number;
  totalPages: number;
  currentPage: number;
  pageSize: number;
}

​
API Endpoints

The service uses the base URL from environment.apiUrl:
  • GET /states - Retrieves all states
  • GET /cities?state={state}&page={page}&pageSize={pageSize} - Retrieves filtered cities

​
Implementation Details

  • The service is provided in the root injector (providedIn: 'root')
  • Uses Angular’s HttpClient for HTTP requests
  • Query parameters are built using HttpParams for the cities endpoint
  • All optional filters are only added to the request if they have values
  • Returns RxJS Observables for reactive data handling

Build docs developers (and LLMs) love

Get started for freeTalk to us