How to Do Cross-Browser Testing on Windows — Including Safari via Playwright

To test follow few steps:

Step 1. Install node
Step 2. create Folder and run these commands

commands

1. npm init -y 2. npm install playwright 3. npx playwright install 4. npx playwright open -b webkit

Step 3. update package.json 's scripts

package.json

"scripts": { "test:chrome": "npx playwright test --headed --browser=chromium", "test:firefox": "npx playwright test --headed --browser=firefox", "test:safari": "npx playwright test --headed --browser=webkit" }

Step 4. create Test folder in above folder and create file with name browser.test.ts and add below code

browser.test.ts

import { test } from '@playwright/test' test.use({ ignoreHTTPSErrors: true, }); test('test browser', async ({ page }) => { // point this to wherever you want await page.goto('http://localhost:4200/') // keep browser open await page.pause() })

Step 5. run command npm run test:safari

How to Highlight a Link of Side Nav When It Has Multiple Child Links in Angular

🔗 How to Highlight a Link When It Has Multiple Child Links in Angular

When building a sidebar in Angular, you might want to highlight a parent link when any of its child routes are active. Angular’s routerLinkActive only works for single routes — so here’s a quick 2-step solution using a custom directive.

1. Step 1: Create a custom directive
   Write a directive that checks the current URL against a list of child links and adds an active class if any match.

Step 1: Directive Code

import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { filter } from 'rxjs/operators'; @Directive({ selector: '[activeLinks]' }) export class ActiveLinksDirective implements OnInit, OnDestroy { @Input() activeLinks: string[] = []; @Input() activeClass = 'active'; private sub!: Subscription; constructor( private router: Router, private el: ElementRef, private renderer: Renderer2 ) {} ngOnInit(): void { // Subscribe to router events this.sub = this.router.events .pipe(filter(event => event instanceof NavigationEnd)) .subscribe((event) => { this.updateActiveClass(); }); // Initial check this.updateActiveClass(); } ngOnDestroy(): void { if (this.sub) { this.sub.unsubscribe(); } } private updateActiveClass(): void { if (!this.activeLinks || this.activeLinks.length === 0) { return; } const currentUrl = this.router.url; let isActive = false; // Check each active link for exact match for (const link of this.activeLinks) { // Exact match (including query parameters) if (currentUrl === link) { isActive = true; break; } // Decoded exact match (in case of encoded URLs) const decodedCurrentUrl = decodeURIComponent(currentUrl); const decodedLink = decodeURIComponent(link); if (decodedCurrentUrl === decodedLink) { isActive = true; break; } } // Apply or remove the active class if (isActive) { this.renderer.addClass(this.el.nativeElement, this.activeClass); } else { this.renderer.removeClass(this.el.nativeElement, this.activeClass); } }

2. Step 2: Use it in your template
   On your parent menu link, pass the list of child URLs to the directive.

Step 2: Template Code

<a mat-list-item routerLink="/dashboard/add-product" [activeLinks]="['/dashboard/add-product', '/dashboard/product?productType=1', '/dashboard/product?productType=2', '/dashboard/product?productType=3' ]" > <span class="material-symbols-outlined">calendar_add_on</span> <span *ngIf="sideBarOpen">Add Product</span> </a>

✅ Works with multiple child links, query parameters, and is easy to reuse.

✅ This blog is written by TechJourney with Gagan, sharing practical Angular tips for developers.

Create Search Functionality using 2 steps using pipe in Angular

To Implement Search Functionality without writing code in ts file

Step1: Create a Pipe using below code.

Code Of Search Filter Pipe

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchByFilter' }) export class SearchByFilterPipe implements PipeTransform { transform(items: any[], searchText: string, fieldName: string): any[] { if (!items) return []; if (!searchText) return items; searchText = searchText.toLowerCase(); return items.filter(item => item[fieldName]?.toLowerCase().includes(searchText)); } }

Step2: write below code where you want to implement search like in drop down.

Code Snippet

<div> <mat-label class="font-semibold">Select Company*</mat-label> <mat-form-field class="w-1/3"> <mat-select formControlName="companyId" (selectionChange)="onOrganizationChange($event.value)" placeholder="Select Company"> <mat-form-field > <input matInput placeholder="Search Company" #searchInput /> </mat-form-field> <mat-option *ngFor="let org of organizationsData | searchByFilter:searchInput.value:'organizationName'" [value]="org.organizationId"> {{ org.organizationName }} </mat-option> </mat-select> </mat-form-field> </div>

In above code we use just

<input matInput  placeholder="Search Company" #searchInput /><br> 
based on referece variable we took input and pass to pipe | searchByFilter:searchInput.value:'organizationName'"

🧩 Implementing a Lightweight Query Handler in .NET using GMediator fully free for commerical use

In modern .NET applications, maintaining clean architecture is critical — and that’s where the Mediator pattern shines. It decouples the request/response flow and promotes separation of concerns.

While libraries like MediatR are popular, sometimes you want something even lighter — with zero dependencies.

Enter: GMediator, a custom lightweight mediator implementation.

🚀 What We’ll Build
In this blog, we’ll create a simple GET API using GMediator that returns a list of products stored in an in-memory store — no database, no ORM — just the core pattern in action.
🧱 Step 1: Define the Product Model

Code Snippet

public class Product { public Guid Id { get; set; } = Guid.NewGuid(); public string Name { get; set; } public decimal Price { get; set; } }

💾 Step 2: Create an In-Memory Store

Code Snippet

public static class ProductStore { public static List<Product> Products { get; set; } = new() { new Product { Name = "Laptop", Price = 1200 }, new Product { Name = "Mouse", Price = 20 }, new Product { Name = "Keyboard", Price = 45 } }; }

📬 Step 3: Create the Query Request

Code Snippet

using GMediator.Interfaces; public class GetAllProducts : IRequest<List<Pro>> { } public class Pro { public Guid Id { get; set; } = Guid.NewGuid(); public string Name { get; set; } public decimal Price { get; set; } } 🧠 Step 4: Implement the Query Handler using GMediator.Interfaces; public class GetAllProductsHandler : IRequestHandler<GetAllProducts, List<Pro>> { public Task<List<Pro>> Handle(GetAllProducts request, CancellationToken cancellationToken) { var products = ProductStore.Products .Select(x => new Pro { Id = x.Id, Name = x.Name, Price = x.Price }) .ToList(); // Important: convert to List<Pro> return Task.FromResult(products); } }

🎯 Step 5: Create the Controller

Code Snippet

[ApiController] [Route("api/[controller]")] public class ProductsController : ControllerBase { private readonly IMediator _mediator; public ProductsController(IMediator mediator) { _mediator = mediator; } [HttpGet] public async Task<IActionResult> Get() { var products = await _mediator.Send(new GetAllProducts()); return Ok(products); } }

🧪 Step 6: Register GMediator in Program.cs

Code Snippet

builder.Services.AddGMediator(); // Register your custom GMediator

💡 Final Thoughts
GMediator is a great option for internal projects, low-dependency APIs, or learning the Mediator pattern hands-on.
You can extend this by adding Create, Update, Delete, or integrating with a real database like SQLite or SQL Server.

Building a Scalable .NET Backend Using Clean Architecture (With Optional Layers) in just an second

If you're building a new .NET backend, Clean Architecture is the best way to keep your code organized, scalable, and future-proof.
🧱 What is Clean Architecture?
It's a way to structure your project into layers:
Domain – core business models
Application – commands, queries, interfaces
Infrastructure – external services (API, logging, etc.)
Persistence – database (EF Core, SQL)
API – controllers
Tests – optional unit/integration tests
⚙️ Script-Based Setup
You can auto-generate this structure using a simple CMD script.
✅ You choose what to include:
Want Infrastructure? Type y
Need Tests? Type n
Want to skip Persistence? Type n




Steps To use:

1. use notepad save below code as setup-architecture.cmd

Code Snippet

@echo off SETLOCAL ENABLEEXTENSIONS :: Prompt for solution name set /p SOLUTION_NAME=Enter your solution name (e.g., ResumeAI.Optimizer): :: Prompt for optional layers set /p ADD_TESTS=Do you want to add a Tests project? (y/n): set /p ADD_PERSISTENCE=Do you want to add a Persistence layer? (y/n): set /p ADD_INFRASTRUCTURE=Do you want to add an Infrastructure layer? (y/n): :: Create Solution echo Creating solution... dotnet new sln -n %SOLUTION_NAME% :: Create Base Projects dotnet new webapi -n %SOLUTION_NAME%.API dotnet new classlib -n %SOLUTION_NAME%.Application dotnet new classlib -n %SOLUTION_NAME%.Domain :: Optional Projects if /i "%ADD_INFRASTRUCTURE%"=="y" ( dotnet new classlib -n %SOLUTION_NAME%.Infrastructure ) if /i "%ADD_PERSISTENCE%"=="y" ( dotnet new classlib -n %SOLUTION_NAME%.Persistence ) if /i "%ADD_TESTS%"=="y" ( dotnet new xunit -n %SOLUTION_NAME%.Tests ) :: Add Projects to Solution echo Adding projects to solution... dotnet sln add .\%SOLUTION_NAME%.API\%SOLUTION_NAME%.API.csproj dotnet sln add .\%SOLUTION_NAME%.Application\%SOLUTION_NAME%.Application.csproj dotnet sln add .\%SOLUTION_NAME%.Domain\%SOLUTION_NAME%.Domain.csproj if /i "%ADD_INFRASTRUCTURE%"=="y" ( dotnet sln add .\%SOLUTION_NAME%.Infrastructure\%SOLUTION_NAME%.Infrastructure.csproj ) if /i "%ADD_PERSISTENCE%"=="y" ( dotnet sln add .\%SOLUTION_NAME%.Persistence\%SOLUTION_NAME%.Persistence.csproj ) if /i "%ADD_TESTS%"=="y" ( dotnet sln add .\%SOLUTION_NAME%.Tests\%SOLUTION_NAME%.Tests.csproj ) :: Add Project References echo Adding project references... :: API references dotnet add .\%SOLUTION_NAME%.API\%SOLUTION_NAME%.API.csproj reference ^ .\%SOLUTION_NAME%.Application\%SOLUTION_NAME%.Application.csproj ^ .\%SOLUTION_NAME%.Domain\%SOLUTION_NAME%.Domain.csproj if /i "%ADD_INFRASTRUCTURE%"=="y" ( dotnet add .\%SOLUTION_NAME%.API\%SOLUTION_NAME%.API.csproj reference .\%SOLUTION_NAME%.Infrastructure\%SOLUTION_NAME%.Infrastructure.csproj ) if /i "%ADD_PERSISTENCE%"=="y" ( dotnet add .\%SOLUTION_NAME%.API\%SOLUTION_NAME%.API.csproj reference .\%SOLUTION_NAME%.Persistence\%SOLUTION_NAME%.Persistence.csproj ) :: Application references Domain dotnet add .\%SOLUTION_NAME%.Application\%SOLUTION_NAME%.Application.csproj reference .\%SOLUTION_NAME%.Domain\%SOLUTION_NAME%.Domain.csproj :: Infrastructure and Persistence references if /i "%ADD_INFRASTRUCTURE%"=="y" ( dotnet add .\%SOLUTION_NAME%.Infrastructure\%SOLUTION_NAME%.Infrastructure.csproj reference ^ .\%SOLUTION_NAME%.Application\%SOLUTION_NAME%.Application.csproj ^ .\%SOLUTION_NAME%.Domain\%SOLUTION_NAME%.Domain.csproj ) if /i "%ADD_PERSISTENCE%"=="y" ( dotnet add .\%SOLUTION_NAME%.Persistence\%SOLUTION_NAME%.Persistence.csproj reference ^ .\%SOLUTION_NAME%.Application\%SOLUTION_NAME%.Application.csproj ^ .\%SOLUTION_NAME%.Domain\%SOLUTION_NAME%.Domain.csproj ) :: Test references if /i "%ADD_TESTS%"=="y" ( dotnet add .\%SOLUTION_NAME%.Tests\%SOLUTION_NAME%.Tests.csproj reference ^ .\%SOLUTION_NAME%.Application\%SOLUTION_NAME%.Application.csproj ) echo. echo ✅ Clean Architecture setup completed for %SOLUTION_NAME%! echo. ENDLOCAL pause

2. save this file in respective folder where u want your project files
3. open cmd at this location and run this script by just type its name only that is setup-architecture.cmd

🔄 How to Extend Component Logic and Template in Angular (Simple Guide) => use of extends and ngTemplateOutlet

When building Angular apps, you might have common logic or reusable layouts across components. Instead of duplicating code, you can use extends in TypeScript and ng-template + ngTemplateOutlet in HTML.

Let’s walk through a simple example with 2 components where one extends logic and also injects custom HTML.

---

✅ Step 1: Create a Child Component (as base layout)

This is the reusable component that contains a common layout and logic.

child.component.ts

import { Component, Input, TemplateRef } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', }) export class ChildComponent { @Input() title: string = 'Base Title'; @Input() contentTemplate?: TemplateRef<any>; getTitle(): string { return this.title; } }

child.component.html

<div class="card"> <h2>{{ getTitle() }}</h2> <ng-container *ngIf="contentTemplate; else defaultContent"> <ng-container *ngTemplateOutlet="contentTemplate"></ng-container> </ng-container> <ng-template #defaultContent> <p>This is default content from ChildComponent.</p> </ng-template> </div>

• ✅ Layout and logic are defined here.
• ✅ Accepts external HTML through contentTemplate.

---

✅ Step 2: Create a Parent Component That Extends Child

This component inherits logic from ChildComponent and injects its own template content.

parent.component.ts

import { Component, TemplateRef, ViewChild } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', }) export class ParentComponent extends ChildComponent { @ViewChild('customHtml', { static: true }) customHtml!: TemplateRef<any>; override title = 'Title from ParentComponent'; ngOnInit() { this.contentTemplate = this.customHtml; } }

parent.component.html

<ng-template #customHtml> <p>This is custom HTML from <strong>ParentComponent</strong>.</p> </ng-template> <app-child [title]="title" [contentTemplate]="contentTemplate"></app-child>

• ✅ Inherits logic like title and getTitle() from ChildComponent.
• ✅ Injects its own content via ng-template.

---

✅ Final Output

• ChildComponent provides the reusable layout.
• ParentComponent injects dynamic HTML and extends the logic.
• This keeps your code DRY, clean, and scalable.

Use Cases: shared card layouts, reusable modal structures, dashboards, etc.

🧹 How to Remove SSR (Server Side Rendering) from an Angular 19 Project

Sometimes you add Angular SSR using @angular/ssr, but later want to return to a clean client-side app. Here's how to fully remove SSR (Server-Side Rendering) from your Angular project. 🔥 Step 1: Delete SSR Files Remove these files from the src/ folder: main.server.ts app.server.module.ts server.ts Any .server.ts files like: app.routes.server.ts app.config.server.ts 🛠️ Step 2: Update angular.json Inside "architect > build > options", remove the following: "server": "src/main.server.ts", "outputMode": "server", "ssr": { "entry": "src/server.ts" } Also remove the entire "server" block from angular.json if it exists. 🧾 Step 3: Clean Up TypeScript Config ❌ Delete: tsconfig.server.json ✅ Edit tsconfig.app.json like this: { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [], "include": ["src/**/*.ts"] } 🧹 Step 4: Uninstall SSR Dependencies 🖥️ Run in Terminal / PowerShell / CMD: npm uninstall @angular/platform-server @nguniversal/express-engine express 🚀 Step 5: Clean & Serve PowerShell (Windows): Remove-Item -Recurse -Force node_modules, dist, .angular npm install ng serve Mac/Linux terminal: rm -rf node_modules dist .angular npm install ng serve ✅ Done! Your Angular app is now SSR-free and runs entirely with Client-Side Rendering (CSR) — faster dev, fewer headaches!