touhidrahman

<nav aria-label="Page navigation">
    <ul class="navlinks">
        <li *ngIf="showFirstLastButton">
            <a
                [queryParams]="{ size: size, page: 1 }"
                [routerLink]="routerLinkBase"
                queryParamsHandling="merge"
                class="navlink"
            >
                First

touhidrahman

<main>
    <app-movie-card 
        *ngFor="let movie of movies$ | async"
        [movie]="movie]
    ></app-movie-card>
</main>

<app-pagination
    [currentPage]="page$ | async"
    [totalPages]="totalPages$ | async"

touhidrahman

export class PaginationComponent {
   // ...

    getNavigablePages(): number[] {
        const pages = []
        const left = Math.max(1, this.currentPage - this.windowSize)
        const right = Math.min(this.totalPages, this.currentPage + this.windowSize)
        for (let i = left; i <= right; i++) {
            pages.push(i)
        }

touhidrahman

import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { RouterModule } from '@angular/router'

@Component({
    selector: 'app-pagination',
    standalone: true,
    imports: [CommonModule, RouterModule],
    templateUrl: './pagination.component.html',
    styleUrls: ['./pagination.component.scss'],

touhidrahman

<nav aria-label="Page navigation">
    <ul class="navlinks">
        <li><a class="navlink"> First </a></li>
        <li><a class="navlink"> < Prev </a></li>
        
        <li *ngFor="let page of [1, 2, 3, 4, 5]">
            <a class="navlink">
                {{ page }}
            </a>
        </li>

touhidrahman

/***********************
 *    app-config.ts    *
 ***********************/

import { InjectionToken } from '@angular/core'

export interface AppConfig {
    production: boolean
    apiURL: string
}

touhidrahman

import { Inject, Injectable } from "@angular/core";
import { WINDOW } from "@ng-web-apis/common";

export const ACCESS_TOKEN_KEY = "accesToken";
export const REFRESH_TOKEN_KEY = "refreshToken";

@Injectable({ providedIn: "root" })
export class TokenStorageService {
  constructor(@Inject(WINDOW) private windowRef: Window) {}

touhidrahman

import { DOCUMENT } from '@angular/common';
import { Component, Inject, Input, OnInit } from '@angular/core';
import { environment } from '@environment/environment';
import { Friend } from '@features/friends/models/friend';
import { Loader } from '@googlemaps/js-api-loader';
import { MarkerClusterer } from '@googlemaps/markerclusterer';

@Component({
  selector: 'app-friend-map',
  template: '<div class="w-full h-[60vh]" id="googlemap"></div>',

touhidrahman

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { getPagination } from '@core/utils/pagination.util';
import { Friend } from '@features/friends/models/friend';
import { FriendApiService } from '@features/friends/services/friend-api.service';
import { BehaviorSubject, combineLatest, debounceTime,
  EMPTY, interval, Subject, switchMap,
  takeUntil, tap } from 'rxjs';

@Component({

touhidrahman

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '@environment/environment';
import { Observable } from 'rxjs';
import { Friend } from '../models/friend';

@Injectable({
  providedIn: 'root',
})
export class FriendApiService {