The HttpClient module in Angular has a feature called an HTTP Interceptor that enables developers to examine and modify HTTP requests and answers globally before application logic handles them.  Tasks including adding authorization tokens to headers, logging, resolving failures, and altering requests and answers are all frequently performed by interceptors.

Key Features of HTTP Interceptors

• Middleware for HTTP Requests and Responses: Interceptors sit between the application and the backend, processing all HTTP requests and responses.
• Global Scope: Once an interceptor is configured, it applies to all HTTP requests and responses in the application.
• Chaining: Multiple interceptors can be implemented, and they are executed in the order they are provided.

Benefits of HTTP Interceptors
Following are some of the key benefits of using HTTP Interceptors in Angular.

• Testability and reusability: Interceptors are easy to test in isolation, allowing you to ensure that each interceptor behaves correctly
• Centralized code for cross-cutting concerns: HTTP Interceptors allow you to define logic for common tasks, such as authentication, logging, error handling, or adding headers, in a centralized location.
• Global application-level modifications: Interceptors operate globally, intercepting all HTTP requests and responses made by the Angular application. This means you can apply changes or perform actions consistently across multiple API calls without having to modify each individual request or response manually.
• Error handling and logging: Interceptors can be utilized to handle errors globally, providing a consistent approach to error reporting and handling throughout the application.
• Caching and request/response manipulation: HTTP Interceptors can be leveraged to implement caching mechanisms, reducing redundant requests and optimizing the application’s performance.
• Separation of concerns: By using HTTP Interceptors, you can keep concerns related to data fetching and communication (HTTP) separate from the business logic of your components and services.
• Security and authentication: Interceptors are commonly used to add authorization headers or authentication tokens to outgoing requests. This ensures that the user’s authentication status is automatically included in API calls without the need to explicitly set headers in every request.
• Easy integration with third-party libraries: Interceptors can be used to integrate with third-party libraries or APIs seamlessly. For example, you can apply a specific format to API responses that are expected by a charting library or a data visualization tool.

Logging Interceptor

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpResponse,
} from '@angular/common/http';
import { Observable, tap } from 'rxjs';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log('Outgoing HTTP request', request);
    return next.handle(request).pipe(
      tap((event: HttpEvent<any>) => {
        console.log('Incoming HTTP response', event);
      })
    );
  }
}

Provide an interceptor in the app module.
import { LoggingInterceptor } from './interceptors/logging.interceptor';

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: LoggingInterceptor,
    multi: true,
  },
];

Adding Headers to Requests
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HeadersInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    console.log(request);
    const GUID = 'f4189b26-01af-432c-bcd8-cb4bc7e90980';
    const modifiedRequest = request.clone({
      setHeaders: {
        GUID,
      },
    });
    return next.handle(modifiedRequest);
  }
}

Provide an interceptor in the app module.
import { HeadersInterceptor  } from './interceptors/headers.interceptor'

providers: [
    {
      provide: HTTP_INTERCEPTORS, useClass: HeadersInterceptor, multi: true
    }
  ]

Error Handling Interceptor
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse,
} from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // Handle the error here
        console.error('error occurred:', error);
        // throw error as per requirement
        return throwError(error);
      })
    );
  }
}

Provide an interceptor in the app module.
import { ErrorInterceptor } from './interceptors/error.interceptor';

  providers: [
    {
      provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true
    }
  ]

Authentication Interceptor
CLI command: ng generate interceptor auth.
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service'; // Service to get the token

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Get the token from the AuthService
    const authToken = this.authService.getToken();

    // Clone the request and add the Authorization header
    const authReq = authToken
      ? req.clone({
          headers: req.headers.set('Authorization', `Bearer ${authToken}`),
        })
      : req;

    return next.handle(authReq);
  }
}

Create the AuthService
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private token: string | null = null;

  // Simulate storing and retrieving the token
  setToken(token: string): void {
    this.token = token;
  }

  getToken(): string | null {
    return this.token;
  }

  clearToken(): void {
    this.token = null;
  }
}

Register the Interceptor
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true, // Allow multiple interceptors
    },
  ],
})
export class AppModule {}

Handle Token Expiration
import { Router } from '@angular/router';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService, private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = this.authService.getToken();

    const authReq = authToken
      ? req.clone({
          headers: req.headers.set('Authorization', `Bearer ${authToken}`),
        })
      : req;

    return next.handle(authReq).pipe(
      catchError((error) => {
        if (error.status === 401) {
          // Redirect to login page on unauthorized response
          this.authService.clearToken();
          this.router.navigate(['/login']);
        }
        return throwError(error);
      })
    );
  }
}

With this post, we'll use Recharts with an Angular frontend and a Node.js backend to build a dashboard with stunning charts.

To concentrate on the UI for the time being, we will use hardcoded data. Real data can be connected later.

1.1 Install Angular CLI
Make sure you have Node.js installed. Then install Angular CLI globally:
npm install -g @angular/cli

1.2 Create a New Angular Project
ng new dashboard-app
cd dashboard-app

1.3  Create the Dashboard Component
We’ll create a DashboardComponent with hardcoded data for revenue, user activity, and sales. The component uses Chart.js to render three charts: a line chart for revenue, a line chart for user activity, and a bar chart for sales by category.

Here’s the code for dashboard.component.ts:
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Chart } from 'chart.js/auto';

interface ChartData {
  month: string;
  revenue: number;
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="dashboard-container p-8">
      <h1 class="text-4xl font-bold mb-8">Dashboard</h1>

      <!-- Stats Grid -->
      <div class="stats-grid mb-8">
        <div class="stat-card" *ngFor="let stat of stats">
          <div class="stat-header">
            <span class="stat-title">{{stat.title}}</span>
            <i class="stat-icon" [class]="stat.icon"></i>
          </div>
          <div class="stat-value">{{stat.value}}</div>
        </div>
      </div>

      <!-- Charts -->
      <div class="charts-grid mb-8">
        <div class="chart-container">
          <canvas id="revenueChart"></canvas>
        </div>
        <div class="chart-container">
          <canvas id="userActivityChart"></canvas>
        </div>
      </div>

      <div class="chart-container">
        <canvas id="salesChart"></canvas>
      </div>
    </div>
  `,
  styles: [`
    .dashboard-container {
      max-width: 1400px;
      margin: 0 auto;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .stat-card {
      background: white;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .stat-title {
      font-size: 0.875rem;
      color: #64748b;
    }

    .stat-value {
      font-size: 1.5rem;
      font-weight: bold;
      color: #1e293b;
    }

    .charts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 1rem;
    }

    .chart-container {
      background: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  `]
})
export class DashboardComponent implements OnInit {
  stats = [
    { title: 'Total Revenue', value: '$443,000', icon: 'bi bi-currency-dollar' },
    { title: 'Average Order', value: '$245', icon: 'bi bi-credit-card' },
    { title: 'Total Customers', value: '12.5K', icon: 'bi bi-people' },
    { title: 'Total Orders', value: '8.2K', icon: 'bi bi-cart' }
  ];

  revenueData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: 'Revenue',
      data: [24000, 26000, 32000, 28000, 35000, 42000, 39000, 45000, 48000, 52000, 49000, 55000],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  };

  userActivityData = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [
      {
        label: 'Active Users',
        data: [3200, 3800, 4200, 3900, 3600, 2900, 2800],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      },
      {
        label: 'New Users',
        data: [1400, 1600, 1800, 1500, 1300, 1000, 900],
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1
      }
    ]
  };

  salesData = {
    labels: ['Electronics', 'Clothing', 'Books', 'Home', 'Sports'],
    datasets: [{
      label: 'Sales by Category',
      data: [42000, 28000, 15000, 22000, 18000],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.5)',
        'rgba(255, 206, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(153, 102, 255, 0.5)'
      ]
    }]
  };

  constructor() {}

  ngOnInit(): void {
    this.createCharts();
  }

  private createCharts(): void {
    // Revenue Chart
    new Chart('revenueChart', {
      type: 'line',
      data: this.revenueData,
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });

    // User Activity Chart
    new Chart('userActivityChart', {
      type: 'line',
      data: this.userActivityData,
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });

    // Sales Chart
    new Chart('salesChart', {
      type: 'bar',
      data: this.salesData,
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  }
}

Code in app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule],
  template: `
    <div class="app-container">
      <router-outlet></router-outlet>
    </div>
  `,
  styles: [`
    .app-container {
      min-height: 100vh;
      background-color: #f8f9fa;
      padding: 1rem;
    }
  `]
})
export class AppComponent {
  title = 'dashboard';
}

Code for not-found.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-not-found',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="not-found-container">
      <div class="error-card">
        <div class="error-header">
          <i class="bi bi-exclamation-circle text-red-500"></i>
          <h1>404 Page Not Found</h1>
        </div>
        <p>The page you're looking for doesn't exist.</p>
      </div>
    </div>
  `,
  styles: [`
    .not-found-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8f9fa;
      padding: 1rem;
    }

    .error-card {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      max-width: 400px;
      width: 100%;
    }

    .error-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    h1 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #1e293b;
    }

    p {
      color: #64748b;
    }
  `]
})
export class NotFoundComponent {}

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent)
  },
  {
    path: '**',
    loadComponent: () => import('./not-found/not-found.component')
      .then(m => m.NotFoundComponent)
  }
];

Server Side code - index.js
import express, { type Request, Response, NextFunction } from "express";
import { registerRoutes } from "./routes";
import path from "path";
import { fileURLToPath } from "url";
import { dirname } from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Logging middleware
app.use((req, res, next) => {
  const start = Date.now();
  const path = req.path;
  let capturedJsonResponse: Record<string, any> | undefined = undefined;

  const originalResJson = res.json;
  res.json = function (bodyJson, ...args) {
    capturedJsonResponse = bodyJson;
    return originalResJson.apply(res, [bodyJson, ...args]);
  };

  res.on("finish", () => {
    const duration = Date.now() - start;
    if (path.startsWith("/api")) {
      let logLine = `${req.method} ${path} ${res.statusCode} in ${duration}ms`;
      if (capturedJsonResponse) {
        logLine += ` :: ${JSON.stringify(capturedJsonResponse)}`;
      }

      if (logLine.length > 80) {
        logLine = logLine.slice(0, 79) + "…";
      }

      console.log(`${new Date().toLocaleTimeString()} [express] ${logLine}`);
    }
  });

  next();
});

(async () => {
  const server = await registerRoutes(app);

  app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
    const status = err.status || err.statusCode || 500;
    const message = err.message || "Internal Server Error";
    res.status(status).json({ message });
    throw err;
  });

  // Serve static files from the Angular build output directory
  const distPath = path.resolve(__dirname, "..", "dist", "public");
  app.use(express.static(distPath));

  // Always return index.html for any non-API routes (Angular routing)
  app.get("*", (_req, res) => {
    res.sendFile(path.join(distPath, "index.html"));
  });

  const port = 5000;
  server.listen({
    port,
    host: "0.0.0.0",
    reusePort: true,
  }, () => {
    console.log(`${new Date().toLocaleTimeString()} [express] serving on port ${port}`);
  });
})();

angular.json file
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "dashboard": {
      "projectType": "application",
      "schematics": {},
      "root": "client",
      "sourceRoot": "client/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/public",
            "index": "client/src/index.html",
            "main": "client/src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "assets": [
              "client/src/favicon.ico",
              "client/src/assets"
            ],
            "styles": [
              "client/src/styles.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "client/src/environments/environment.ts",
                  "with": "client/src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "dashboard:build:production"
            },
            "development": {
              "browserTarget": "dashboard:build:development"
            }
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

This post showed how to use Angular and Node.js to create an eye-catching dashboard. We produced adaptable and interactive charts that make data come to life by utilizing Chart.js. This stack is perfect for creating scalable apps because of Angular's modular design and Node.js's speed. Additional charts, authentication, and the integration of real-time data sources are possible future enhancements. You may design dashboards of expert quality that meet your demands with this base.

In this comprehensive guide, we'll build a modern User Management System using Angular. This application showcases several advanced features including theme switching, undo/redo functionality, and robust data management.

Table of Contents

Project Overview

• Architecture and Design
• Core Features Implementation
• Services Implementation
• Component Development
• Advanced Features
• Best Practices and Tips

Project Overview
Our User Management System includes the following features.

• Modern, responsive design with light/dark theme support
• Interactive data grid with in-place editing
• Complete CRUD operations with validation
• Undo/Redo functionality
• Data export capabilities (Excel, PDF, PNG)
• Loading placeholders
• Enhanced user experience with tooltips
• Form validation with error messages
• Duplicate entry prevention
• Confirmation dialogs
• Local storage persistence
• Reusable components

Architecture and Design
Project Structure
src/
├── app/
│   ├── components/
│   │   ├── user-grid/
│   │   └── shared/
│   ├── services/
│   │   ├── user.service.ts
│   │   ├── theme.service.ts
│   │   └── data.service.ts
│   └── models/
│       └── user.model.ts

Core Models
// user.model.ts
export interface User {
    id?: number;
    name: string;
    userName: string;
    email: string;
    phone: string;
    website: string;
}
export interface UserState {
    users: User[];
    undoStack: User[][];
    redoStack: User[][];
}

Core Features Implementation
Theme Service: The theme service manages application-wide theme switching.
    @Injectable({
      providedIn: 'root'
    })
    export class ThemeService {
      private isDarkTheme = new BehaviorSubject<boolean>(false);
      isDarkTheme$ = this.isDarkTheme.asObservable();
      constructor() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
          this.setDarkTheme(savedTheme === 'dark');
        }
      }
      setDarkTheme(isDark: boolean) {
        this.isDarkTheme.next(isDark);
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
        document.body.classList.toggle('dark-theme', isDark);
      }
    }

User Service: The User Service handles all data operations with undo/redo support.
@Injectable({
  providedIn: 'root'
})
export class UserService {
  private readonly STORAGE_KEY = 'user_data';

  private state: UserState = {
    users: [],
    undoStack: [],
    redoStack: []
  };

  private usersSubject = new BehaviorSubject<User[]>([]);
  users$ = this.usersSubject.asObservable();

  // CRUD Operations with Undo/Redo Support
  addUser(user: User): boolean {
    if (this.isDuplicate(user)) return false;

    this.pushToUndoStack();
    user.id = this.getNextId();
    this.state.users.push(user);
    this.updateState();

    return true;
  }

  // Additional methods for update, delete, undo, redo
}

Data Grid Component: The main grid component implements the user interface.
@Component({
  selector: 'app-user-grid',
  template: `
    <div class="user-grid-container" [class.dark-theme]="isDarkTheme$ | async">
      <div class="header">
        <h2>User Management</h2>
        <div class="actions">
          <app-button (click)="addNewUser()">Add User</app-button>
          <app-button (click)="toggleTheme()">Toggle Theme</app-button>
        </div>
      </div>
      <!-- Grid implementation -->
    </div>
  `
})
export class UserGridComponent implements OnInit {
  users$ = this.userService.getUsers();
  isDarkTheme$ = this.themeService.isDarkTheme$;

  constructor(
    private userService: UserService,
    private themeService: ThemeService
  ) {}
}

Advanced Features
Export Functionality
export class ExportService {
  exportToExcel(data: User[]) {
    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Users');
    XLSX.writeFile(workbook, 'users.xlsx');
  }
  // Similar methods for PDF and PNG export
}

Loading Placeholders
<ng-container *ngIf="loading$ | async; else userGrid">
  <div class="placeholder-grid">
    <div class="placeholder-row" *ngFor="let i of [1, 2, 3, 4, 5]">
      <!-- Placeholder content -->
    </div>
  </div>
</ng-container>

Form Validation
export class UserFormComponent {
  userForm = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    email: ['', [Validators.required, Validators.email]],
    userName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9_-]*')]],
    // Additional form controls
  });
}
Tips

• State Management
  • Use BehaviorSubject for reactive state management
  • Implement undo/redo using stack data structures
  • Persist state changes to localStorage
• Performance Optimization
  • Use OnPush change detection strategy
  • Implement trackBy functions for ngFor loops
  • Lazy load features when possible
• Error Handling
  • Implement comprehensive error handling
  • Use toast notifications for user feedback
  • Log errors appropriately

This User Management System demonstrates several Angular best practices and advanced features. Key takeaways include.

• Proper service architecture for state management
• Implementing complex features like undo/redo
• Creating reusable components
• Managing application themes
• Handling data persistence
• Form validation and error handling

Have you ever wondered how Angular apps seem to handle intricate dependencies and logic with ease? The magic that happens behind the scenes with services and dependency injection (DI) is frequently the key. These Angular features are the unsung heroes that drive the scalability and maintainability of your app, despite the fact that they might sound like catchphrases.

In-depth discussions of services, their creation and usage, and how Angular's DI system may help you manage dependencies more efficiently will all be covered in this article. Consider this your backstage ticket to learning the architecture of Angular, where we will unravel the intricacies of DI and demonstrate how to use it to improve the modularity, testability, and—above all—efficiency of your application.

Let's get started and discover Angular's services and DI capability!

Services
For an easier understanding, we will use the analogy of a remote control.
You do not need to go up to the TV to change channels, adjust the volume, or turn it on and off. You just use the remote (service), which is always there, to perform these actions from a distance.

In Angular, services are like this remote. Components don’t need to directly handle or interact with complex logic or data—they just "press a button" (call a service method), and the service handles the rest. It simplifies things and keeps everything within easy reach.

Another important aspect is reusability. With a universal remote control, you can control multiple devices. Instead of having to adjust each device manually or have a separate remote for each, the universal remote lets you control all these devices with just one tool.

In Angular, a service is a reusable piece of code that you can "call" from any component in your app. Whether it is fetching data, performing a calculation, or handling complex logic, you don’t have to rewrite the same functionality in multiple components. You simply "press the button" (call the service) wherever it is needed, and the service does the job, ensuring that your app remains clean, DRY (Don’t Repeat Yourself), and easy to maintain.

Services maximize reusability and provide a better code structure for your project.

When to use a service?
In Angular, a service should be used when you need to:

• Share data or logic across components: Services provide a central place where data or business logic can be shared across multiple components, so you don't have to duplicate code in each component.
• Encapsulate business logic: If you have complex logic or operations that don’t belong directly in a component, putting them in service makes your code cleaner and more maintainable.
• Make HTTP requests: Services are commonly used for interacting with back-end APIs. Instead of having HTTP requests directly inside components, you use services to handle all the communication with the server.
• Manage state: Services can manage the state of your application, like keeping track of user authentication, settings, or preferences, and can keep this state consistent across components.
• Improve testability: By separating business logic into services, you can more easily write unit tests for that logic. It also allows mocking or stubbing services in tests to isolate components.

Creating a service

• Create your angular project
• Create the service you need using the following command

ng generate service <<name of the service>>

If you need to create the service in a specific file, you can modify the command slightly as follows:
ng generate service <<folder-path/name_of_the_service>>

For our demo, we will create our service in the ‘my-services-folder’ folder and call it ‘my-first-service’. We will use this command: ng generate service my-services-folder/my-first-service

Once the command is successfully executed, you will see the following:

The project will include the following:

When you open the service.ts file, you will see the following file already created for you:

You can start writing your functions under the constructor [as from line 9].

Note. A common practice is to have API calls in services. For the sake of simplicity, a function returning a welcome note is used in our example.

At this point, we have successfully created a service.

Inject and use a service
Think of it like this: if you are building a car, instead of the car having to make its own engine, wheels, and seats, someone (like a supplier) gives those parts to the car so it can assemble them.

Dependency injection (DI) is a way to provide components with access to services and other resources.

In our example, we will inject our ‘MyFirstService’ in the ‘app component’ and use the getGreeting function. This will allow us to reuse the function. Remember that, the same steps apply to any component you would want to inject the service.

Open the component you want to inject the service and pass the service in the constructor.
In our case, we will do it in the app.component.ts

Create a function that will call the required function from the service. You can also call it from the ngOnInit as well. It all depends on your use cases.

Create the html template to get and display the information and trigger the function call.
In our case, we will create in the app.component.html

Note. On line 2, we are using [(ngModel)]. This is called 2-way binding.
When using it, you need to add ‘FormsModule’ under ‘imports’ in the component’s module file; in our case, app.module.ts.

Below is what the end result looks like:

Conclusion
Angular's core ideas of services and dependency injection aid in organizing your application in a way that is modular, testable, and manageable. Dependency injection makes sure that these services are delivered in a flexible and effective way, while services allow you to encapsulate reusable functionality and communicate data across many components. Correct DI setup enables loose connection between services and components, which facilitates code scalability and modification as your application expands. You can write code that follows best practices in Angular development and is cleaner and easier to maintain if you have a firm grasp of services and DI.

Components in Angular traverse through several phases, from creation to decomposition. The angular lifespan is the aggregate term for these phases. Knowing how to use Angular's lifecycle hooks enables developers to conduct initialization, cleanup, and other essential tasks at strategic points in a component's lifespan. An extensive examination of each of these lifecycle hooks and their proper application is given in this article.

Angular Lifecycle Hooks
Here is a list of the primary lifecycle hooks in Angular.

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

Let's explore each of these hooks in detail.

1. ngOnChanges
When it’s called: This hook is called whenever an input property bound to a component changes. It’s called before ngOnInit and whenever the input properties are updated.
Use case: Use ngOnChanges to act on changes to input properties from the parent component.

Example
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: '<p>{{data}}</p>',
})
export class ChildComponent implements OnChanges {
@Input() data: string;
ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges called', changes);
}
}

2. ngOnInit
When it’s called: This hook is called once, after the first ngOnChanges. It’s typically used for component initialization.
Use case: Use ngOnInit to perform component initialization, like fetching data.

Example
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>Example works!</p>',
})
export class ExampleComponent implements OnInit {
ngOnInit() {
console.log('ngOnInit called');
}
}

3. ngDoCheck
When it’s called: This hook is called during every change detection run. It’s useful for custom change detection.
Use case: Use ngDoCheck to implement custom change detection logic.

Example
import { Component, DoCheck } from '@angular/core';
@Component({
selector: 'app-check',
template: '<p>Check works!</p>',
})
export class CheckComponent implements DoCheck {
ngDoCheck() {
console.log('ngDoCheck called');
}
}

4. ngAfterContentInit
When it’s called: This hook is called after Angular projects external content into the component’s view (ng-content).
Use case: Use ngAfterContentInit to respond to content projection into the component.

Example
import { Component, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-content',
template: '<ng-content></ng-content>',
})
export class ContentComponent implements AfterContentInit {
ngAfterContentInit() {
console.log('ngAfterContentInit called');
}
}

5. ngAfterContentChecked
When it’s called: This hook is called after every check of the component’s projected content.
Use case: Use ngAfterContentChecked to act after the content is checked.

Example
import { Component, AfterContentChecked } from '@angular/core';
@Component({
selector: 'app-content-check',
template: '<ng-content></ng-content>',
})
export class ContentCheckComponent implements AfterContentChecked {
ngAfterContentChecked() {
console.log('ngAfterContentChecked called');
}
}

6. ngAfterViewInit
When it’s called: This hook is called after Angular initializes the component’s views and child views.
Use case: Use ngAfterViewInit to perform actions after the component’s view is initialized.

Example
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-view-init',
template: '<p>View Init works!</p>',
})
export class ViewInitComponent implements AfterViewInit {
ngAfterViewInit() {
console.log('ngAfterViewInit called');
}
}

7. ngAfterViewChecked
When it’s called: This hook is called after every check of the component’s view.
Use case: Use ngAfterViewChecked to act after the component’s view is checked.

Example
import { Component, AfterViewChecked } from '@angular/core';
@Component({
selector: 'app-view-check',
template: '<p>View Check works!</p>',
})
export class ViewCheckComponent implements AfterViewChecked {
ngAfterViewChecked() {
console.log('ngAfterViewChecked called');
}
}

8. ngOnDestroy
When it’s called: This hook is called just before Angular destroys the component.
Use case: Use ngOnDestroy for cleanup, like unsubscribing from observables and detaching event handlers.

Example
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-destroy',
template: '<p>Destroy works!</p>',
})
export class DestroyComponent implements OnDestroy {
ngOnDestroy() {
console.log('ngOnDestroy called');
}
}

Lifecycle Sequence
Understanding the order of these hooks is crucial for correctly implementing logic that depends on the component's lifecycle stages.

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

Practical Use Cases

• ngOnInit: Ideal for initialization tasks like fetching data from a service.
• ngOnChanges: Useful for reacting to changes in input properties.
• ngOnDestroy: Perfect for cleaning up resources, like unsubscribing from observables.
• ngAfterViewInit: Great for manipulating the DOM after the view is initialized.

Conclusion
Mastering Angular lifecycle hooks is essential for building robust and maintainable Angular applications. By understanding when and how to use each hook, developers can ensure their components are properly initialized, updated, and cleaned up. This not only leads to better performance but also improves code organization and readability.

Node Version Switcher, or NVS for short, is a cross-platform utility that may be used on Windows, Linux, and Mac workstations to manage several node versions on a single computer.

This program installs the various node versions in the Windows user profile folder without requiring administrator privileges on your workstation. Put otherwise, it won't interfere with the C:\Program Files or C:\System32 files.

Just like NVM (Node Version Manger)This tool manages all legacy and newer node versions independently and manages the runtime for you on the fly. As you see in the above screenshot, NVS can maintain multiple versions of node in same environment. Each version of the node can have its own tools and runtime.

The node is required for building SPFx (SharePoint Framework) solutions and building SPA (Single Page Applications) and many more.

Steps
Please follow the below steps to set up and configure NVS on windows workstation. Please note that all the steps are performed against windows 11 OS workstation
Step 1. Let us check if the workstation has NVS (Node Version Switcher) already installed.

Step 2. Let us try installing NVS on windows machine. In Windows 11, winget is already installed as part of OS and MSFT recommends using winget to install and maintain the software from Github repository. At first it is required to open the command prompt as administrator.

Step 3. in the CMD window, try running the below command to install the NVS. winget install jasongin.nvs –source winget

Step 4. Wait for the operation to complete. At the end you should be getting the message ‘Successfully installed’

Step 5. Close the command window. Open the command window again in ‘Administrator Mode’. This is required. Once opened type in ‘nvs’ in the command window. This time if you can see the nvs version numbers you are good and proceed to step 8. Else if you are getting the ‘Self signed certificate issue’ as per below screen capture then proceed to step 6.

Step 6. Copy the URL https://nodejs.org/dist/index.json in the chrome browser and download the certificate. Make sure you download file contains certificate chain. Click on the certificate information in browser.

Click on lock that says, ‘Connection is secure’.

Click on ‘Certificate is valid’

Click on the ‘Details’ tab.

Click on ‘Export Certificate’.

Step 7. Set up the environment variable for your profile under windows environment variables. Set the file for the environment variable to the certificate that you just downloaded.

Step 8. Open the command prompt as administrator and then type nvs and look for the below output.

Step 9. If you do not have any version installed, you will be asked to select the node versions from the available binaries. In this case I have chosen to install the version 18.20.6 by using the below command.

nvs add 10.20.6

Step 10. Once the installation starts you will be getting below message.

After couple of minutes, you should get a message that the specified node version is added.

Step 11. clear the screen and type I nvs, you should get the versions now. Select the required version.

Step 12: I have type in (a). you can select the one that is required for your needs. Once selected you can check the version by using the below command.

node –v

Conclusion
Thus, in this article, you have seen how to install NVS a cross-platform tool to manage multiple node versions efficiently, in windows workstation.

HostForLIFE.eu Node.js Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

In order to guarantee a seamless user experience and facilitate debugging, Angular error management entails recording and controlling errors. Angular comes with a number of built-in tools and methods for methodically managing faults.

1. Managing Errors in HTTP
The HttpClient and the catchError operator from RxJS can be used to manage errors in HTTP requests.

For instance
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // Client-side error
      console.error('Client-side error:', error.error.message);
    } else {
      // Server-side error
      console.error(`Server-side error: ${error.status} - ${error.message}`);
    }
    return throwError(() => new Error('Something went wrong; please try again later.'));
  }
}

catchError: Intercepts errors and allows custom handling.
throwError: Re-throws the error after handling it for further processing.

2. Global Error Handling
Angular provides a way to handle application-wide errors using the ErrorHandler service.

Custom Global Error Handler.
Create a custom error handler.
import { ErrorHandler, Injectable, NgZone } from '@angular/core';

  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
    constructor(private ngZone: NgZone) {}

    handleError(error: any): void {
      // Log the error to the console or a logging service
      console.error('Global Error:', error);

      // Notify the user (e.g., using a toast or modal)
      this.ngZone.run(() => {
        alert('An unexpected error occurred.');
      });
    }
  }
   
Register the error handler in AppModule.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GlobalErrorHandler } from './global-error-handler';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

The service will be used throughout the entire application to catch logs.

3. Error Interceptors
Use an HTTP interceptor to handle errors globally for all HTTP requests.

Example
Create an HTTP interceptor.
  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
  import { catchError, throwError } from 'rxjs';

  @Injectable()
  export class ErrorInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
      return next.handle(req).pipe(
        catchError((error: HttpErrorResponse) => {
          // Handle different error types
          if (error.status === 404) {
            console.error('Not Found:', error.message);
          } else if (error.status === 500) {
            console.error('Server Error:', error.message);
          }

          // Optionally, rethrow the error
          return throwError(() => new Error('An error occurred. Please try again later.'));
        })
      );
    }
  }   

Register the interceptor in AppModule.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ErrorInterceptor } from './error-interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

4. Using Angular Guards for Route Error Handling
Angular guards can protect routes and handle access-related errors.
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = false; // Replace with actual authentication logic
    if (!isAuthenticated) {
      alert('You are not authorized to access this page.');
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

5. Error Display in the UI
Display user-friendly error messages in the UI using Angular components.

Example
Create an error message component.
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-error-message',
  template: `
    <div *ngIf="errorMessage" class="error">
      {{ errorMessage }}
    </div>
  `,
  styles: [
    `
      .error {
        color: red;
      }
    `,
  ],
})
export class ErrorMessageComponent {
  @Input() errorMessage: string | null = null;
}

Use the component.
<app-error-message [errorMessage]="error"></app-error-message>

6. RxJS Error Handling Strategies
    Retry Failed Requests.
    import { retry } from 'rxjs';

    this.http.get(this.apiUrl).pipe(
      retry(3), // Retry up to 3 times
      catchError(this.handleError)
    );

Fallback Data.
this.http.get(this.apiUrl).pipe(
  catchError(() => of([])) // Return fallback data on error
);

7. Logging Errors
Use external services like Sentry, LogRocket, or custom logging services to log errors.

Example
@Injectable({
  providedIn: 'root'
})
export class LoggingService {
  logError(message: string, stack: string) {
    // Send error logs to an external server
    console.log('Logging error:', message);
  }
}

A fundamental element of modern web development is the usage of live chat software to enable real-time user contact. Using technologies like Socket.IO and Node.js greatly simplifies the process. Socket.IO is a JavaScript library that allows bidirectional, real-time communication between web clients and servers, resulting in stable connections across all browsers. Node.js, a stable runtime environment that uses an event-driven, non-blocking I/O model, makes it simple to create scalable network applications.

Steps for Creating a Project]
Step 1. Setting Up the Project
Use my previous article for setting up Node.js, "How to upload file in Node.js" In this article, we mentioned important commands for uploading files in Node.js.

Step 2. Setting Up the Server
Create the Server File. Create a file named index.js
const express = require('express');
const app = express();
const { Server } = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = new Server(server);
const port = 4000;
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
    socket.on('send name', (username) => {
        io.emit('send name', username);
    });
    socket.on('send message', (chat) => {
        io.emit('send message', chat);
    });
});
server.listen(port, () => {
    console.log(`Server is listening at the port: ${port}`);
});

Step 3. Creating the Frontend
Create the HTML File. Create a file named index.html
<!DOCTYPE html>
<html>
<head>
    <title>Chat app using Socket IO and Node JS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        h1 {
            color: #273c75;
        }

        .msg-box {
            display: flex;
            flex-direction: column;
            background: darkgray;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1 class="font-bold text-3xl text-center mt-5">
        C# Corner Chat App using Socket IO and Node JS
    </h1>
    <div>
    </div>
    <form class="flex flex-col justify-center items-center mt-5" id="form">
        <div class="msg-box">
            <input class="border border-gray-400 rounded-md mt-5 p-1" type="text" placeholder="Name" id="myname"
                autocomplete="off">
            <input class="border border-gray-400 rounded-md mt-5 p-1" type="text" placeholder="Message" id="message"
                autocomplete="off">
            <button class="bg-blue-500 rounded-md p-2 text-white mt-5">
                Send
            </button>
        </div>
    </form>
    <div class="flex flex-col justify-center items-center mt-5" id="messageArea">
    </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    let socket = io();
    let form = document.getElementById('form');
    let myname = document.getElementById('myname');
    let message = document.getElementById('message');
    let messageArea = document.getElementById("messageArea");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        if (message.value) {
            socket.emit('send name', myname.value);
            socket.emit('send message', message.value);
            message.value = "";
        }
    });
    socket.on("send name", (username) => {
        let name = document.createElement("p");
        name.style.backgroundColor = "#a59494";
        name.style.textAlign = "center";
        name.style.color = "white";
        name.textContent = username + ":";
        messageArea.appendChild(name);
    });
    socket.on("send message", (chat) => {
        let chatContent = document.createElement("p");
        chatContent.textContent = chat;
        messageArea.appendChild(chatContent);
    });
</script>
</html>

Step 4. Running the Application
Run the command in CMD.
node index.js

In the output, you can open the chat application in two different browsers or different tabs. When you start typing and send a message, it reflects on both screens in real-time.

Conclusion
You have now successfully used Node.js and Socket.IO to develop a basic live chat application. This application facilitates real-time communication between users by rapidly reflecting messages across several linked clients. To make your app even better, think about including features like private messaging, user authentication, and database storage for conversation history. Using CSS frameworks or original designs to enhance the user interface can improve the user experience. Use Vercel or Heroku to launch your application for increased accessibility. Continue researching and experimenting to create a robust and feature-rich chat experience. Enjoy yourself while coding!

The use of "pipes" is one of Angular's most potent tools for formatting and changing data inside templates. Developers can apply transformations like formatting dates, changing text cases, or even filtering data in an efficient and reusable way by using pipes, which offer a declarative mechanism to handle data before it is shown to the user.

Writing clean, manageable, and modular code for Angular applications requires an understanding of pipes. The main distinctions between pipes and functions will be discussed in this post, along with how to use built-in pipes and make your own custom pipes to increase Angular's functionality. You will have a firm grasp on how to integrate pipes into your Angular projects to improve user experience and expedite data presentation by the end of this tutorial.

What is an Angular Pipe?
In Angular, a pipe is a way to transform data before it is displayed in the user interface. Pipes can be used in templates to modify or format data without having to alter the original data.

Pipes are an Angular concept, not a TypeScript (TS) feature. They are a core part of Angular’s template syntax and are used to transform data in the view (template) layer of Angular applications.

Key Points about Pipes in Angular

• Angular-Specific: Pipes are a built-in feature of the Angular framework designed to be used in Angular templates. They are not a native feature of JavaScript or TypeScript.
• Purpose: Their primary function is to transform data in the template before it is displayed to the user. This transformation can include formatting dates, numbers, currencies, filtering arrays, or performing more complex data transformations.

Declarative Transformation: Pipes enable declarative transformation of data within the template, meaning that the logic for transforming data is cleanly abstracted away from the component’s TypeScript code.

You may be wondering why we should use Pipes when we can use functions.

Types of Pipes
There are two types of Pipes.
Pure Pipe (Default): A pure pipe will only re-run when its input value changes.
    @Pipe({

      name: 'pureExample',

      pure: true // This is the default value, so you can omit this

    })

    export class PureExamplePipe implements PipeTransform {

      transform(value: any): any {

        console.log('Pure pipe executed');

        return value;

      }

    }

Impure Pipe: An impure pipe will re-run whenever Angular detects a change in the component’s state, even if the input value hasn’t changed.
@Pipe({
  name: 'impureExample',
  pure: false // Set to false to make it impure
})
export class ImpureExamplePipe implements PipeTransform {
  transform(value: any): any {
    console.log('Impure pipe executed');
    return value;
  }
}

In Angular, you can use in-built pipes or create your own.

In-built pipes
Angular provides some basic pipes that can be used.
It comes from the '@angular/common' package.

Some popular ones that can be helpful are:
CurrencyPipe, DatePipe, DecimalPipe, LowerCasePipe, UpperCasePipe and TitleCasePipe

How to use an in-built pipe?
In your ts file, define your variable. In our example, we will use the variable title.
title = 'app works!';

In your html, you can use the pipe as follows:
<h1> {{title | uppercase}} </h1>

The result is how the string title is displayed:

Note. The currency ‘USD’ is added in front because of the currency pipe, and only 10 characters are displayed because of the slide pipe.

Custom pipes
Run the command below to create a pipe file:
ng generate pipe <<pipe-name>>.

For example: ng generate pipe my-custom-pipe. Once executed, the two files below will be created

Open the file ‘my-custom-pipe.pipe.ts. You will see the following boilerplate code provided:
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

After the default class, you can create the function for your new pipe. In our case, we will create a pipe that will replace spaces in a hyphen. It is important to add the decorator ‘@Pipe’ before the class so that Angular knows what follows will be a pipe. Also, pass the name of the pipe as a parameter in the ‘@Pipe’ decorator. Also, when creating the class, implement ‘PipeTransform’. The resulting class will be as follows:
@Pipe({name: 'removeWhiteSpace'})
export class RemoveWhiteSpacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s+/g, '-');
  }
}

The resulting class will be as follows (the full code):
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipePipe implements PipeTransform {


  transform(value: any, args?: any): any {
    return null;
  }
}

@Pipe({name: 'removeWhiteSpace'})
export class RemoveWhiteSpacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s+/g, '-');
  }
}

In the ts file of your component, create the variable that will hold the value that will be transformed
textWithSpaces = 'This is a text with a lot of spaces that will be transformed';

In the html file of your component, do the following:
<p>{{ textWithSpaces | removeWhiteSpace }}</p>

The result is the following:

Conclusion
An effective and potent method for formatting and transforming data in the templates of your application is to use angular pipes. Without having to code repetitious logic in your components, you can quickly manipulate data types like strings, dates, and numbers by utilizing built-in pipes. More freedom is provided by custom pipelines, which let you design modular, reusable, and maintainable transformation logic that is suited to your particular requirements.

Understanding the distinction between pipes and functions is key to leveraging their full potential. While functions provide a direct way to execute code, pipes offer a declarative approach to handle transformations directly within templates, improving readability and performance.

Whether you're working with Angular’s built-in pipes or creating custom ones, the ability to easily manipulate data in the view layer is a significant advantage in building dynamic and user-friendly applications. By mastering Angular pipes, you can keep your code clean, concise, and aligned with best practices, ultimately leading to more maintainable and scalable applications.

With the knowledge of how to use and create pipes, you’re now equipped to enhance your Angular applications with powerful data transformations, making your development experience more efficient and enjoyable.

More than four years ago, on January 15, 2021, Debugger for Chrome wrote the post Debug Angular (1) in VS Code. With 208K readings, that article is really popular. This indicated that while Angular is a very popular tool for web development, it is difficult to persuade many developers to focus on its devugging technology. Although this article is a supplement to the original, I am aware that the Visual Studio Code Debugger for Chrome has been deprecated. We'll check if the original article is still relevant or valid.

Debug Angular in VS Code
Now the current VS Code is with v1.95.3. The VS Code Debugger for Chrome is deprecated:

However, user is introduced to use the JavaScript Debugger extension instead. Click the link, we can see that

this extension is already installed if you use VS Code or Visual Studio:

And furthermore,

Nightly Extension you may want to install our nightly build to get the latest fixes and features. The nightly build runs at 5PM PST on each day that there are changes. You can get Nightly extension from JavaScript Debugger (Nightly) - Visual Studio Marketplace, or search in VS Code extension for
@id:ms-vscode.js-debug-nightly

Debugging in VS Code

Actually, the debugging is the same way as we introduced in article, Debug Angular (1), In VS Code by Debugger for Chrome, we will not repeat the process, but given here the major points:

Configure the launch.json file --- choose the port as your app running

Run the app from the Angular CLI (very important, otherwise, the debugging will not work) by command.
Start to debug.