DEV Community: Md. Maruf Rahman

Angular Testing with Jasmine and Karma: Complete Guide | Unit Testing, Component Testing & E2E

Md. Maruf Rahman — Thu, 29 Jan 2026 21:01:25 +0000

I'll be honest—when I first started with Angular, I skipped testing. I thought it was too time-consuming, and my code worked fine without it. Then I had to refactor a large feature, and I broke three things I didn't even know existed. That's when I learned the value of good tests. They give you confidence to refactor, catch bugs before they reach production, and serve as documentation for how your code should work.

Angular provides excellent testing support out of the box with Jasmine (the testing framework) and Karma (the test runner). TestBed makes it easy to configure testing modules, mock dependencies, and test components in isolation. The testing utilities are powerful enough to test complex scenarios while being simple enough to write tests quickly.

## What is Angular Testing?

Angular Testing provides:

Jasmine - Behavior-driven testing framework
Karma - Test runner for running tests in browsers
TestBed - Testing utilities for configuring test modules
Component Testing - Test components in isolation
Service Testing - Test business logic and HTTP calls
Pipe & Directive Testing - Test custom transformations
Async Testing - Test asynchronous operations
Mocking - Mock dependencies with spies

## Component Testing

Test Angular components with TestBed:

  import { ComponentFixture, TestBed } from '@angular/core/testing';
  import { BusinessListComponent } from './business-list.component';
  import { BusinessService } from 'src/services/business.service';
  import { of } from 'rxjs';
  import { ReactiveFormsModule } from '@angular/forms';
  import { HttpClientTestingModule } from '@angular/common/http/testing';

  describe('BusinessListComponent', () => {
    let component: BusinessListComponent;
    let fixture: ComponentFixture<BusinessListComponent>;
    let businessService: jasmine.SpyObj<BusinessService>;

    beforeEach(async () => {
      const spy = jasmine.createSpyObj('BusinessService', ['GetBusinesses']);

      await TestBed.configureTestingModule({
        declarations: [BusinessListComponent],
        providers: [
          { provide: BusinessService, useValue: spy }
        ],
        imports: [ReactiveFormsModule, HttpClientTestingModule]
      }).compileComponents();

      fixture = TestBed.createComponent(BusinessListComponent);
      component = fixture.componentInstance;
      businessService = TestBed.inject(BusinessService) as jasmine.SpyObj<BusinessService>;
    });

    it('should create', () => {
      expect(component).toBeTruthy();
    });

    it('should load businesses on init', () => {
      const mockBusinesses = [{ id: 1, name: 'Business 1' }];
      businessService.GetBusinesses.and.returnValue(of({ data: mockBusinesses }));

      fixture.detectChanges();

      expect(businessService.GetBusinesses).toHaveBeenCalled();
      expect(component.businesses).toEqual(mockBusinesses);
    });
  });

## Service Testing

Test Angular services:

  import { TestBed } from '@angular/core/testing';
  import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
  import { BusinessService } from './business.service';
  import { environment } from 'src/environments/environment';

  describe('BusinessService', () => {
    let service: BusinessService;
    let httpMock: HttpTestingController;

    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        providers: [BusinessService]
      });
      service = TestBed.inject(BusinessService);
      httpMock = TestBed.inject(HttpTestingController);
    });

    afterEach(() => {
      httpMock.verify();
    });

    it('should fetch businesses', () => {
      const mockBusinesses = [{ id: 1, name: 'Business 1' }];

      service.GetBusinesses({}).subscribe(businesses => {
        expect(businesses.data).toEqual(mockBusinesses);
      });

      const req = httpMock.expectOne(`${environment.ApiUrl}business/get`);
      expect(req.request.method).toBe('POST');
      req.flush({ data: mockBusinesses });
    });
  });

## Best Practices

Write tests for each component, service, pipe, and directive
Use TestBed for component and service testing
Mock dependencies with Jasmine spies
Use HttpClientTestingModule for HTTP testing
Test both success and error scenarios
Use fakeAsync and tick for async operations
Maintain high test coverage (aim for 80%+)

## 📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Testing Component Inputs and Outputs - Complete examples
✅ Testing Component Forms - Form validation testing
✅ Pipe Testing - Testing custom pipes
✅ Directive Testing - Testing custom directives
✅ Async Testing - fakeAsync, tick, flush, and Observable testing
✅ Testing Guards - Route guard testing
✅ Testing Interceptors - HTTP interceptor testing
✅ Testing RxJS Operators - Testing reactive code
✅ Common Testing Patterns - Test helpers, mock factories, data builders
✅ Karma Configuration - Complete setup guide
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Testing? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Services, Component Communication, Reactive Forms, and more.

Angular RxJS State Management Simplified: Mastering Observables, Subjects & BehaviorSubjects 🧠

Md. Maruf Rahman — Thu, 29 Jan 2026 20:58:20 +0000

When I first started building Angular applications, I thought I needed Redux or NgRx for state management. Then I realized that Angular is built on RxJS, and I could manage state effectively using just Observables, Subjects, and BehaviorSubjects. This approach is lighter, simpler, and works perfectly for most applications.

RxJS is Angular's foundation for reactive programming. It provides powerful tools for managing asynchronous data streams, which makes it perfect for state management. Using BehaviorSubject to store state, exposing Observables for components to subscribe to, and using RxJS operators for derived state, you can build robust state management without external libraries.

What is RxJS State Management?

RxJS State Management provides:

Reactive state - State as Observable streams
BehaviorSubject - Stores current state value
Subjects - Event streams and notifications
Operators - Transform and combine state
No external libraries - Built into Angular
Type-safe - Full TypeScript support
Testable - Easy to test with RxJS testing utilities

BehaviorSubject for State

Create a state management service:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

interface AppState {
  user: any;
  businesses: any[];
  selectedBusiness: any;
}

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private stateSubject = new BehaviorSubject<AppState>({
    user: null,
    businesses: [],
    selectedBusiness: null
  });

  public state$ = this.stateSubject.asObservable();

  getState(): AppState {
    return this.stateSubject.value;
  }

  setState(partialState: Partial<AppState>): void {
    this.stateSubject.next({
      ...this.stateSubject.value,
      ...partialState
    });
  }

  getUser$(): Observable<any> {
    return this.state$.pipe(map(state => state.user));
  }

  getBusinesses$(): Observable<any[]> {
    return this.state$.pipe(map(state => state.businesses));
  }
}

Using State in Components

Subscribe to state changes:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { StateService } from './state.service';

export class BusinessListComponent {
  businesses$: Observable<any[]> = this.stateService.getBusinesses$();

  constructor(private stateService: StateService) {}

  selectBusiness(business: any): void {
    this.stateService.setState({ selectedBusiness: business });
  }
}

<!-- Template with async pipe -->
<div *ngIf="businesses$ | async as businesses">
  <div *ngFor="let business of businesses">
    {{ business.name }}
  </div>
</div>

Best Practices

Use BehaviorSubject for state - Stores current value
Use Subject for events - Event streams and notifications
Always unsubscribe - Or use async pipe
Use async pipe in templates - Automatic subscription management
Use distinctUntilChanged - Prevent unnecessary updates
Create specific selectors - For derived state
Keep state services focused - Single responsibility

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ RxJS Operators for State - map, filter, distinctUntilChanged, shareReplay, debounceTime, switchMap, combineLatest
✅ Subject for Events - Event streams and notifications
✅ Advanced State Patterns - State with Actions, Effects, and Selectors
✅ Component Patterns - takeUntil pattern, async pipe best practices
✅ Error Handling - Complete error handling patterns
✅ When to Use RxJS vs NgRx - Decision framework
✅ Common Patterns - State service structure, error handling
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with RxJS state management? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Services, Component Communication, Reactive Forms, and more.

Ultimate Angular Services Guide: Mind-blowing Ways Explored

Md. Maruf Rahman — Thu, 29 Jan 2026 20:56:08 +0000

When I first started building Angular applications, I put all my business logic directly in components. That worked fine for small apps, but as applications grew, I found myself duplicating code, struggling with component communication, and making components harder to test. That's when I discovered Angular Services and Dependency Injection, and it completely changed how I structure applications.

Angular Services are singleton classes that provide reusable business logic, data access, and shared functionality across your application. They use Angular's Dependency Injection system, which means you don't manually create service instances—Angular does it for you and provides them wherever you need them. This makes your code more modular, testable, and maintainable.

What are Angular Services?

Angular Services provide:

Reusable business logic - Share code across components
Data access layer - Centralize API calls and data operations
State management - Share state between components
Singleton pattern - Single instance shared across the app
Dependency Injection - Automatic service provisioning
Testability - Easy to mock and test independently
Separation of concerns - Keep components focused on presentation

Creating a Basic Service

Create a service using the @Injectable decorator:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpHelper } from 'src/core/factory/http.helper';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class BusinessService {
  private url: string;

  constructor(private http: HttpHelper) {
    this.url = `${environment.ApiUrl}business`;
  }

  public GetBusinesses(data: any): Observable<any> {
    return this.http.post(`${this.url}/get`, data);
  }

  public GetBusiness(businessId: number): Observable<any> {
    return this.http.get(`${this.url}/${businessId}/details`);
  }

  public SaveBusiness(data: any, businessId: number): Observable<any> {
    return this.http.post(`${this.url}/${businessId}/details`, data);
  }
}

Using Services in Components

Inject services into components via constructor:

import { Component, OnInit } from '@angular/core';
import { BusinessService } from 'src/services/business.service';

@Component({
  selector: 'app-business-list',
  templateUrl: './business-list.component.html'
})
export class BusinessListComponent implements OnInit {
  public businesses: any[] = [];
  public loading: boolean = false;

  constructor(private businessService: BusinessService) {}

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

  private loadBusinesses(): void {
    this.loading = true;
    this.businessService.GetBusinesses({}).subscribe({
      next: (response) => {
        this.businesses = response.data;
        this.loading = false;
      },
      error: (error) => {
        console.error('Error:', error);
        this.loading = false;
      }
    });
  }
}

Service Providers

Different ways to provide services:

// Application-wide singleton (recommended)
@Injectable({
  providedIn: 'root'
})
export class GlobalService { }

// Module-scoped service
@Injectable()
export class ModuleService { }

// Component-scoped service
@Component({
  providers: [ComponentService]
})
export class MyComponent { }

Best Practices

Use providedIn: 'root' for singleton services
Inject services via constructor
Keep services focused on single responsibility
Use services for business logic, not presentation
Make services testable and mockable
Document service APIs clearly

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Service with HTTP Client - Complete HTTP service examples
✅ Service Providers - providedIn options, module-level, component-level
✅ Service Communication Patterns - BehaviorSubject, state management
✅ Injecting Services into Other Services - Service dependencies
✅ Service Factory Pattern - Factory providers and tokens
✅ Service Testing - Complete testing strategies
✅ Common Service Patterns - Data services, utility services, auth services
✅ Error Handling - Complete error handling patterns
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Services? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Component Communication, Reactive Forms, Routing, and more.

Ultimate Angular Routing & Navigation Guide With Best Practices

Md. Maruf Rahman — Thu, 29 Jan 2026 20:53:11 +0000

Building a single-page application sounds simple until you need to handle routing. I've seen Angular applications where every route was eagerly loaded (making the initial bundle huge), routes weren't protected (allowing unauthorized access), and navigation was handled inconsistently. When I learned how to properly configure Angular Router, it transformed how I build applications.

Angular Router is a powerful routing framework that enables navigation between views based on URL changes. It supports lazy loading (loading modules only when needed), route guards (protecting routes based on authentication or authorization), route parameters (dynamic segments like /products/:id), query parameters (for filtering and searching), and nested routes (for complex layouts). Understanding these features is crucial for building scalable Angular applications.

What is Angular Router?

Angular Router provides:

Client-side routing - Navigation without page refreshes
Lazy loading - Load modules on-demand for better performance
Route guards - Protect routes with authentication/authorization
Route parameters - Dynamic route segments
Query parameters - Optional filtering and search
Nested routes - Complex layouts with child routes
Route resolvers - Prefetch data before route activation

Basic Route Configuration

Set up routing in your app routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BusinessListComponent } from './business/business-list.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'business', component: BusinessListComponent },
  { path: '**', redirectTo: '/dashboard' } // Wildcard route (404)
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Lazy Loading Modules

Implement lazy loading for better performance:

const routes: Routes = [
  {
    path: 'business',
    loadChildren: () => import('./business/business.module')
      .then(m => m.BusinessModule)
  },
  {
    path: 'users',
    loadChildren: () => import('./users/users.module')
      .then(m => m.UsersModule)
  }
];

Route Parameters

Access route parameters in components:

import { ActivatedRoute, Router } from '@angular/router';

export class BusinessDetailsComponent implements OnInit {
  businessId: number;

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.businessId = +this.route.snapshot.paramMap.get('id');

    // Or subscribe to parameter changes
    this.route.paramMap.subscribe(params => {
      this.businessId = +params.get('id');
    });
  }
}

Best Practices

Use lazy loading for feature modules
Protect routes with guards
Use route parameters for dynamic segments
Use query parameters for filtering
Implement nested routes for complex layouts
Handle 404 with wildcard routes

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Route Guards - CanActivate, CanDeactivate, CanLoad, Resolve
✅ Query Parameters - Reading and setting query params
✅ Nested Routes - Child routes and router outlets
✅ Route Resolvers - Prefetching data before route activation
✅ Navigation Methods - routerLink, router.navigate, router.navigateByUrl
✅ Route Data - Passing static data to routes
✅ Route Configuration Options - enableTracing, useHash, preloading
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Routing? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Guards, Modules, Services, and more.

Ultimate Angular Modules, Lazy Loading Guide With Best Practice

Md. Maruf Rahman — Thu, 29 Jan 2026 20:48:34 +0000

When I first started building Angular applications, I put everything in the root AppModule. It worked fine for small apps, but as the application grew, the initial bundle size became huge, and the app took forever to load. That's when I learned about Angular modules and lazy loading, and it completely changed how I structure applications.

Angular modules are containers that organize related components, directives, pipes, and services. They help manage dependencies, organize code into logical units, and most importantly, enable lazy loading. Lazy loading means feature modules are only loaded when their routes are accessed, dramatically reducing the initial bundle size and improving startup time.

What are Angular Modules?

Angular Modules provide:

Code Organization - Group related components, services, and functionality
Dependency Management - Control what's available to other modules
Lazy Loading - Load modules on-demand for better performance
Encapsulation - Keep feature code isolated and maintainable
Reusability - Share components and services across modules

Root Module (AppModule)

The main application module that bootstraps your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Feature Module

Organize features into separate modules:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BusinessRoutingModule } from './business-routing.module';
import { BusinessListComponent } from './business-list.component';

@NgModule({
  declarations: [BusinessListComponent],
  imports: [
    CommonModule, // Use CommonModule instead of BrowserModule
    BusinessRoutingModule
  ]
})
export class BusinessModule { }

Lazy Loading

Implement lazy loading for feature modules:

const routes: Routes = [
  {
    path: 'business',
    loadChildren: () => import('./business/business.module')
      .then(m => m.BusinessModule)
  }
];

Best Practices

Keep AppModule minimal - Only declare root component
Use CommonModule in feature modules - Not BrowserModule
Implement lazy loading - For better performance
Create shared modules - For reusable components
Organize by feature - Group related functionality

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Shared Modules - Creating reusable component modules
✅ Core Modules - Application-wide services and interceptors
✅ Module Providers - Service scoping and forRoot pattern
✅ Lazy Loading Strategies - Preloading and custom loading
✅ Module Architecture - Best practices for large applications
✅ Performance Optimization - Bundle size reduction techniques
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Modules? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Routing, Services, Component Communication, and more.

Ultimate Angular HTTP Client & Interceptors With Best Examples

Md. Maruf Rahman — Thu, 29 Jan 2026 20:45:00 +0000

Making HTTP requests in Angular is straightforward, but handling authentication tokens, error responses, loading states, and request transformations across an entire application can become tedious. That's where HTTP Interceptors come in. They're one of my favorite Angular features because they let you handle all this cross-cutting concerns in one place.

Angular HTTP Client is built on RxJS Observables, which makes it perfect for handling asynchronous operations. Interceptors are middleware that sit between your application and the HTTP backend. They can modify requests (add headers, transform data), handle responses (transform data, catch errors), and implement features like authentication, logging, and caching globally.

What are Angular HTTP Interceptors?

Angular HTTP Interceptors provide:

Request Interception - Modify requests before they're sent
Response Interception - Transform responses before they reach components
Error Handling - Catch and handle errors globally
Authentication - Add tokens automatically to all requests
Caching - Cache responses to improve performance
Logging - Log all HTTP requests and responses
Transformation - Transform request/response data

Setting Up HttpClient

First, import HttpClientModule in your Angular module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic HTTP Service

Create a service using HttpClient:

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

@Injectable({
  providedIn: 'root'
})
export class BusinessService {
  private url: string;

  constructor(private http: HttpClient) {
    this.url = `${environment.ApiUrl}business`;
  }

  public GetBusinesses(data: any): Observable<any> {
    return this.http.post(`${this.url}/get`, data);
  }

  public GetBusiness(businessId: number): Observable<any> {
    return this.http.get(`${this.url}/${businessId}/details`);
  }
}

Authentication Interceptor

Add authentication headers automatically to all requests:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

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

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

    if (authToken) {
      const cloned = req.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });
      return next.handle(cloned);
    }

    return next.handle(req);
  }
}

// Register in app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';

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

Best Practices

Use interceptors for cross-cutting concerns
Handle errors globally with error interceptors
Add authentication headers automatically
Implement request/response logging
Cache responses for better performance
Transform data consistently

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Error Handling Interceptor - Global error handling patterns
✅ Response Transformation - Transform responses before components
✅ Request Transformation - Modify requests before sending
✅ Caching Interceptor - Cache responses for performance
✅ Logging Interceptor - Log all HTTP requests/responses
✅ Loading State Interceptor - Manage loading states globally
✅ Token Refresh - Automatic token refresh on expiry
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular HTTP Interceptors? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Services, Routing, Guards, and more.

Master Angular Directives & Pipes: Writing Cleaner, Reusable Code 🛠️

Md. Maruf Rahman — Thu, 29 Jan 2026 20:39:57 +0000

When I first started with Angular, I thought directives and pipes were just nice-to-have features. Then I found myself writing the same conditional rendering logic in multiple components, and the same data transformation code in multiple templates. That's when I realized that custom directives and pipes are powerful tools for creating reusable, maintainable code.

Directives extend HTML with custom behavior. Structural directives (like *ngIf and *ngFor) change the DOM structure, while attribute directives (like [ngClass] and [ngStyle]) modify element appearance or behavior. Pipes transform data for display in templates—formatting dates, currencies, and text. Both are essential for building clean, maintainable Angular templates.

What are Angular Directives and Pipes?

Angular Directives provide:

Structural Directives - Change DOM structure (*ngIf, *ngFor, *ngSwitch)
Attribute Directives - Modify element appearance/behavior ([ngClass], [ngStyle])
Custom Directives - Reusable behavior for specific use cases

Angular Pipes provide:

Built-in Pipes - Date, currency, uppercase, lowercase, json, etc.
Custom Pipes - Data transformations specific to your application
Async Pipe - Handle Observables and Promises automatically

Built-in Structural Directives

Angular provides powerful structural directives out of the box:

<!-- *ngIf - Conditional rendering -->
<div *ngIf="isAuthenticated">
  <p>Welcome, user!</p>
</div>

<!-- *ngFor - Loop through arrays -->
<ul>
  <li *ngFor="let business of businesses; trackBy: trackByBusinessId">
    {{ business.name }}
  </li>
</ul>

Custom Structural Directive

Create custom structural directives for reusable conditional rendering:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appHasPermission]'
})
export class HasPermissionDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private authService: AuthService
  ) {}

  @Input() set appHasPermission(permission: string) {
    const hasPermission = this.authService.hasPermission(permission);

    if (hasPermission) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

Built-in Pipes

Angular provides many built-in pipes for common transformations:

<!-- Date Pipe -->
<p>{{ currentDate | date:'short' }}</p>

<!-- Currency Pipe -->
<p>{{ price | currency:'USD' }}</p>

<!-- Uppercase/Lowercase -->
<p>{{ text | uppercase }}</p>
<p>{{ text | titlecase }}</p>

Custom Pipe

Create custom pipes for specific data transformations:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  pure: true
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 50): string {
    if (!value || value.length <= limit) return value;
    return value.substring(0, limit) + '...';
  }
}

Async Pipe

Handle asynchronous data with the async pipe:

// Template
<div *ngIf="businesses$ | async as businesses">
  <div *ngFor="let business of businesses">
    {{ business.name }}
  </div>
</div>

Best Practices

Use structural directives for conditional rendering
Create custom directives for reusable DOM manipulation
Use pipes for data transformation - Not for business logic
Keep pipes pure when possible - Better performance
Use async pipe - Automatically handles Observables and Promises
Use trackBy function with *ngFor - Better performance with large lists

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Custom Attribute Directives - Highlight, tooltip, and permission directives
✅ Advanced Structural Directives - appUnless directive example
✅ Complete Built-in Pipes - All date formats, currency options, keyvalue pipe
✅ Chaining Pipes - Combining multiple pipes
✅ Pure vs Impure Pipes - Performance considerations
✅ Multiple Async Pipes - Handling multiple observables
✅ Performance Tips - Best practices for optimization
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Directives and Pipes? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Reactive Forms, Component Communication, Services, and more.

Angular Pro Secrets: The Definitive Guide to @Input, @Output, and ViewChild 🔄

Md. Maruf Rahman — Thu, 29 Jan 2026 20:35:50 +0000

When I first started working with Angular, component communication was one of the most confusing aspects of the framework. I'd find myself passing data through multiple levels of components, creating complex event chains, or resorting to global state when a simpler solution existed. It took building several applications before I understood when to use each communication pattern.

The truth is, Angular gives you many ways to share data between components, and each has its place. @Input and @Output are perfect for parent-child relationships. ViewChild lets you access child components directly. Services with RxJS are ideal for sibling communication or sharing state across the app. Understanding which pattern to use when is crucial for building maintainable Angular applications.

What is Angular Component Communication?

Angular Component Communication provides multiple patterns:

@Input - Pass data from parent to child (one-way data flow)
@Output - Emit events from child to parent
ViewChild/ViewChildren - Access child components directly
ContentChild/ContentChildren - Access projected content
Services with RxJS - Share data between any components
Route Data - Pass data through navigation

Parent to Child: Using @Input

The most common communication pattern in Angular is passing data from parent to child using @Input. This is Angular's way of implementing one-way data flow:

// Child Component
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-business-settings',
  templateUrl: './business-settings.component.html'
})
export class BusinessSettingsComponent {
  @Input() public manageBusiness: boolean;
  @Input() public businessInfo: any;
  @Input() public viewDetails: boolean = false;
}

// Parent Component Template
<app-business-settings
  [manageBusiness]="canManage"
  [businessInfo]="currentBusiness"
  [viewDetails]="isViewMode">
</app-business-settings>

Child to Parent: @Output and EventEmitter

Emit events from child to parent using @Output with EventEmitter:

// Child Component
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-business-settings',
  templateUrl: './business-settings.component.html'
})
export class BusinessSettingsComponent {
  @Output() public refresh: EventEmitter<boolean> = new EventEmitter<boolean>();

  public save(): void {
    this.refresh.emit(true);
  }
}

// Parent Component Template
<app-business-settings (refresh)="handleRefresh($event)"></app-business-settings>

Service-Based Communication

Share data between any components using services with RxJS:

// Service
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  private dataSubject = new BehaviorSubject<any>(null);
  public data$ = this.dataSubject.asObservable();

  setData(data: any): void {
    this.dataSubject.next(data);
  }
}

// Component 1 (Sender)
export class Component1 {
  constructor(private dataService: DataSharingService) {}
  sendData(): void {
    this.dataService.setData({ message: 'Hello' });
  }
}

// Component 2 (Receiver)
export class Component2 implements OnInit, OnDestroy {
  private subscription: Subscription;

  constructor(private dataService: DataSharingService) {}

  ngOnInit(): void {
    this.subscription = this.dataService.data$.subscribe(data => {
      this.data = data;
    });
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

Choosing the Right Pattern

Here's my decision framework:

Parent to Child? → Use @Input
Child to Parent? → Use @Output with EventEmitter
Need to Access Child Methods? → Use ViewChild or ViewChildren
Sibling Components or App-Wide State? → Use Service with RxJS
Need to Access Projected Content? → Use ContentChild or ContentChildren

The key is to start with the simplest pattern that works (@Input/@Output), and only move to more complex solutions when you actually need them.

Best Practices

Use @Input for one-way data flow from parent to child
Use @Output with EventEmitter for child to parent communication
Use services with RxJS for sibling component communication
Use ViewChild/ViewChildren to access child component APIs
Unsubscribe from observables to prevent memory leaks
Keep component communication simple and explicit

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Detailed code examples for all communication patterns
✅ @Input with setters and ngOnChanges - Reacting to input changes
✅ ViewChild and ViewChildren - Accessing child components
✅ ContentChild and ContentChildren - Working with projected content
✅ Two-way data binding implementation
✅ Advanced patterns - Combining multiple communication methods
✅ Route data passing - Sharing data through navigation
✅ Memory leak prevention - Proper subscription management
✅ Real-world examples from production applications
✅ Troubleshooting tips and common pitfalls
✅ Performance optimization strategies

👉 Read the full article with all code examples here

What's your experience with Angular Component Communication? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Reactive Forms, Services, Guards, and more.

Ultimate Angular Guards & Route Protection Guide

Md. Maruf Rahman — Thu, 29 Jan 2026 20:31:30 +0000

Building a secure Angular application means more than just hiding UI elements. I've seen applications where routes were "protected" by hiding navigation links, but users could still access protected routes by typing URLs directly. That's not security—that's security theater. Route Guards are Angular's way of actually protecting routes at the framework level.

Route Guards are interfaces that control navigation to and from routes. They can check authentication status, verify user permissions, prevent navigation when there are unsaved changes, and even prefetch data before a route activates. They're essential for building secure, user-friendly Angular applications.

What are Angular Route Guards?

Angular Route Guards provide:

CanActivate - Control access to routes (authentication/authorization)
CanDeactivate - Prevent navigation away from routes (unsaved changes)
CanLoad - Prevent lazy-loaded modules from loading
Resolve - Prefetch data before route activation
Security - Framework-level route protection
User Experience - Prevent data loss and improve performance

CanActivate Guard

Protect routes with authentication and authorization:

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from '../auth/auth.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

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

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated.pipe(
      map(isAuthenticated => {
        if (!isAuthenticated) {
          localStorage.setItem('returnUrl', state.url);
          this.authService.Logout();
          this.router.navigate(['/login']);
          return false;
        }
        return true;
      })
    );
  }
}

// Use in routes
const routes: Routes = [
  {
    path: 'business',
    canActivate: [AuthGuard],
    loadChildren: () => import('./business/business.module').then(m => m.BusinessModule)
  }
];

CanDeactivate Guard

Prevent navigation with unsaved changes:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

// Component implementation
export class BusinessFormComponent implements CanComponentDeactivate {
  form: FormGroup;
  isDirty: boolean = false;

  canDeactivate(): boolean {
    if (this.form.dirty && !this.isDirty) {
      return confirm('You have unsaved changes. Do you want to leave?');
    }
    return true;
  }
}

Best Practices

Use CanActivate for authentication/authorization
Use CanDeactivate for unsaved changes
Use CanLoad for lazy-loaded modules
Use Resolve to prefetch data
Implement proper error handling
Store return URLs for redirects

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Role-Based Guards - Authorization with user roles
✅ CanLoad Guard - Prevent lazy module loading
✅ Resolve Guard - Prefetch data before route activation
✅ Multiple Guards - Combining guards for complex scenarios
✅ Guard Testing - Complete testing strategies
✅ Advanced Patterns - Custom guard implementations
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Guards? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Routing, Services, HTTP Client, and more.

Powerful Forms In Angular: Amazing Ways To Excel

Md. Maruf Rahman — Thu, 29 Jan 2026 20:26:45 +0000

Building forms in Angular used to be one of my least favorite tasks. Between managing form state, handling validation, and dealing with dynamic fields, it felt like I was writing more boilerplate than actual logic. Then I discovered Angular Reactive Forms, and everything changed. Instead of fighting with template-driven forms, I could build complex, validated forms with clean, testable code.

Angular Reactive Forms use a model-driven approach, which means you define your form structure in TypeScript rather than in the template. This gives you programmatic control over form state, validation, and dynamic behavior. FormBuilder makes it easy to create form groups, FormControl handles individual fields, and Validators provide built-in and custom validation rules.

What are Angular Reactive Forms?

Angular Reactive Forms provide:

Model-driven approach - Define forms in TypeScript
Programmatic control - Full control over form state and validation
Type safety - TypeScript support for form structures
Testability - Easy to unit test form logic
Dynamic forms - Add/remove form controls dynamically
Complex validation - Built-in and custom validators
Better performance - More efficient than template-driven forms

Setting Up Reactive Forms

First, import ReactiveFormsModule in your Angular module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic Form with FormBuilder

Create a form using FormBuilder for cleaner syntax:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-business-settings',
  templateUrl: './business-settings.component.html'
})
export class BusinessSettingsComponent implements OnInit {
  public form: FormGroup;
  public save_loading: boolean = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      exitReport: ['', [Validators.required]],
      notificationType: ['', [Validators.required]],
      checkInRadius: ['', [Validators.required]],
      approved: [false]
    });
  }

  public save(): void {
    this.form.markAllAsTouched();
    if (this.form.valid) {
      this.save_loading = true;
      const formData = this.form.getRawValue();
      // Handle form submission
    }
  }
}

Template Binding

Bind the form to your template:

<form [formGroup]="form" (ngSubmit)="save()">
  <div class="form-group">
    <label>Exit Report</label>
    <select formControlName="exitReport" class="form-control">
      <option value="">Select Exit Report Type</option>
      <option value="not-issued">Not Issued</option>
      <option value="issued">Issued</option>
    </select>
    <div *ngIf="form.get('exitReport')?.invalid && form.get('exitReport')?.touched" 
         class="error-message">
      Exit Report is required
    </div>
  </div>

  <button type="submit" [disabled]="save_loading || form.invalid">
    Save Settings
  </button>
</form>

Built-in Validators

Angular provides several built-in validators:

this.form = this.fb.group({
  name: ['', [Validators.required]],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [
    Validators.required,
    Validators.minLength(8),
    Validators.maxLength(20)
  ]],
  phoneNumber: ['', [
    Validators.required,
    Validators.pattern(/^[0-9]{10}$/)
  ]]
});

Best Practices

Use FormBuilder for cleaner syntax
Validate forms before submission
Show validation errors appropriately
Use custom validators for complex validation
Handle form submission properly
Reset forms after successful submission

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Custom Validators - Creating custom validation functions
✅ Dynamic Forms - Adding/removing form controls dynamically
✅ Form Arrays - Managing arrays of form controls
✅ Cross-Field Validation - Validating multiple fields together
✅ Async Validators - Server-side validation
✅ Form Value Changes - Reacting to form value changes
✅ Form Status Changes - Tracking form validation status
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with Angular Reactive Forms? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Services, Routing, Guards, and more.

Type-Safe React TypeScript Best Practices for 2026 🛡️

Md. Maruf Rahman — Thu, 29 Jan 2026 20:20:53 +0000

When I first started using TypeScript with React, I thought it would just add extra typing overhead. Boy, was I wrong. TypeScript has saved me countless hours by catching bugs before they reach production, and it's made my codebase infinitely more maintainable. But using TypeScript effectively in React requires understanding some patterns and best practices that aren't always obvious.

TypeScript brings compile-time type checking to React, which means you catch errors while writing code, not when users report bugs. It also provides incredible IDE support—autocomplete, refactoring, and navigation all work better when TypeScript understands your code structure. But to get these benefits, you need to type your components, props, hooks, and event handlers correctly.

Why TypeScript with React?

TypeScript with React provides:

Type safety - Catch errors at compile time
Better IDE support - Autocomplete, IntelliSense, and refactoring
Self-documenting code - Types serve as documentation
Easier refactoring - TypeScript catches breaking changes
Better collaboration - Types help team members understand code
Runtime error prevention - Catch bugs before they reach production

Type Definitions for Props

Define component prop types using interfaces or types:

type Product = {
  id: string | number;
  name: string;
  price: number;
  stock: number;
  categoryId: number;
  categoryName?: string;
};

interface ProductCardProps {
  product: Product;
  onEdit?: (id: string | number) => void;
  onDelete?: (id: string | number) => void;
  showActions?: boolean;
}

function ProductCard({ 
  product, 
  onEdit, 
  onDelete, 
  showActions = true 
}: ProductCardProps) {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <p>Stock: {product.stock}</p>
      {showActions && (
        <div>
          {onEdit && <button onClick={() => onEdit(product.id)}>Edit</button>}
          {onDelete && <button onClick={() => onDelete(product.id)}>Delete</button>}
        </div>
      )}
    </div>
  );
}

Typing React Hooks

useState Hook

Type useState explicitly or let TypeScript infer:

// Explicit typing
const [name, setName] = useState<string>("");
const [count, setCount] = useState<number>(0);
const [products, setProducts] = useState<Product[]>([]);

// Type inference
const [isLoading, setIsLoading] = useState(false); // boolean
const [user, setUser] = useState<User | null>(null); // Better

Custom Hooks

Create typed custom hooks:

type UseProductsReturn = {
  products: Product[];
  isLoading: boolean;
  isError: boolean;
  error: any;
  refetch: () => void;
};

function useProducts(): UseProductsReturn {
  const { data, isLoading, isError, error, refetch } = useGetProductsQuery({});

  return {
    products: data?.data || [],
    isLoading,
    isError,
    error,
    refetch,
  };
}

Event Handlers

Type event handlers correctly:

// Form submit handler
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // Handle submission
};

// Button click handler
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  // Handle click
};

// Input change handler
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

Best Practices

Use interfaces for component props
Type useState explicitly when needed
Create typed custom hooks
Type event handlers correctly
Use generics for reusable components
Leverage type inference when possible

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Type vs Interface - When to use each
✅ Generics in React - Reusable typed components
✅ Context Types - Typing React Context
✅ Ref Types - Typing useRef and refs
✅ Higher-Order Components - Typing HOCs
✅ Advanced Patterns - Utility types, conditional types
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with TypeScript and React? Share your tips in the comments! 🚀

For more React guides, check out my blog covering React Router, React Hook Form, Redux Toolkit, and more.

React Router Setup: Complete Guide for React Applications

Md. Maruf Rahman — Thu, 29 Jan 2026 20:16:56 +0000

When I first started building React applications, I thought routing would be simple. Just show different components based on the URL, right? Then I had to implement protected routes, nested layouts, route parameters, and handle 404 pages. That's when I realized that proper routing setup is crucial for building maintainable React applications.

React Router DOM is the de facto standard for routing in React applications. It enables client-side routing, which means navigation happens without full page refreshes—your app feels fast and responsive. But more importantly, it provides a declarative way to define your application's routes, handle navigation, and protect routes based on authentication status.

What is React Router?

React Router DOM is a routing library for React that provides:

Client-side routing - Navigation without page refreshes
Declarative routes - Define routes using JSX
Nested routes - Organize routes hierarchically
Protected routes - Control access based on authentication
Route parameters - Dynamic routes like /products/:id
Query parameters - Handle URL search params
Programmatic navigation - Navigate from code

Installation

Install React Router DOM:

npm install react-router-dom

Basic Router Setup

Setting up the router in your main app:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Auth/Login";
import DashboardLayout from "./components/DashboardLayout";
import Home from "./pages/Home";
import Products from "./pages/Products/Products";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<DashboardLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
        </Route>
        <Route path="*" element={<div>404 - Page Not Found</div>} />
      </Routes>
    </BrowserRouter>
  );
}

Using Outlet for Nested Routes

Creating a layout component with Outlet:

import { Outlet, useNavigate } from "react-router-dom";

export default function DashboardLayout() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="flex">
        <SideBar />
        <MainContent>
          <Outlet />
        </MainContent>
      </div>
    </div>
  );
}

Navigation in Components

Programmatic navigation using the useNavigate hook:

import { useNavigate, useParams } from "react-router-dom";

function Products() {
  const navigate = useNavigate();

  const handleAdd = () => {
    navigate("/products/add");
  };

  const handleEdit = (id: string) => {
    navigate(`/products/edit/${id}`);
  };
}

Route Parameters

Access route parameters:

import { useParams } from "react-router-dom";

function EditProduct() {
  const { id } = useParams<{ id: string }>();

  return <div>Editing product {id}</div>;
}

Best Practices

Use BrowserRouter for client-side routing
Organize routes with nested layouts
Protect routes with authentication
Handle 404 with wildcard routes
Use Outlet for nested routes
Type route parameters properly

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

✅ Protected Routes - Authentication-based route protection
✅ Route Parameters - Dynamic routes and URL params
✅ Query Parameters - Handling search params
✅ Navigation Methods - useNavigate, Link, NavLink
✅ Route Guards - Protecting routes with components
✅ Nested Routes - Complex route hierarchies
✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with React Router? Share your tips in the comments! 🚀

For more React guides, check out my blog covering TypeScript, React Hook Form, Redux Toolkit, and more.