ahmed.jeddah19@gmail.com

If you’ve ever used ng-template in Angular, you know how powerful it is for building dynamic, reusable UI components. But here’s the catch: type safety goes out the window. You’re left guessing what’s available in the template context, and IDEs can’t help much. That’s where the TypedTemplateDirective comes in — a simple trick to lock […]

In responsive web design, hiding or showing elements based on screen size is something we all do. But simply using CSS to hide elements (like display: none) doesn’t remove them from the DOM — which can cause performance issues, unnecessary rendering, and even accessibility problems. So, I built a set of Angular structural directives that

If you’ve ever worked with Angular Material’s mat-menu and run into alignment issues—especially in dynamic layouts—you’re not alone. Sometimes the menu just doesn’t line up with the trigger element the way you want, or worse, it breaks on small screens or bubbles up unnecessary key events. That’s exactly why I built the MatMenuRealignDirective: a small

When working with financial data in Angular apps, how you present numbers matters. Clear, consistent formatting not only improves readability but also builds trust with users. While Angular’s built-in CurrencyPipe is great for standard cases, sometimes you need a little more control. That’s where a custom CurrencyFormatPipe comes in handy—letting you apply specific formatting rules,

In modern Angular apps, it’s common to run into UI limitations—especially when you’re displaying long text inside components like cards, tables, or tooltips. To avoid layout breaks or overwhelming the user, truncating text is a practical and clean solution. Instead of hacking around with string manipulation in templates, Angular gives us a cleaner approach: custom

Handling dates in Angular apps goes way beyond simple formatting—especially when you’re showing deadlines, reminders, or overdue tasks. A date like 2025-07-10T00:00:00Z isn’t helpful to your users. Instead, you want to display “Due Today”, “Past due by 2 days”, or “Due in 3 days.” In this post, I’ll show you how to build a DueDatePipe—a

Displaying clean and readable phone numbers is crucial in any web application. Raw strings of digits just don’t cut it when you’re aiming for a polished user experience. That’s where Angular’s custom pipes come in handy. In this article, I’ll walk you through a handy PhoneFormatPipe—a custom Angular pipe I use to format phone numbers

In most Angular projects, we often need to format or transform data before displaying it. Angular’s built-in pipes like date, uppercase, or currency cover the basics, but we quickly run into scenarios where custom logic is required. Instead of creating a custom pipe every single time, there’s a smarter, cleaner alternative—pipeFunction. It lets you use

Creating intuitive, accessible menus is an essential part of modern UI design. Luckily, Angular Material’s MatMenu component makes it easy to add powerful dropdown and context menus to your application. Whether you’re building a simple list of actions or a nested multi-level menu, MatMenu has you covered. In this guide, I’ll walk you through how

Routing is a core feature of Angular that makes navigation seamless within single-page applications. Whether you’re building a small app or an enterprise-grade solution, Angular 19’s routing module gives you the power to create clean, dynamic, and scalable navigation systems. In this guide, I’ll walk you through the essentials of Angular routing—everything from basic setup