Angular on Omid Farhang

Stop Modeling Angular Screens with Five Booleans

Tue, 02 Jun 2026 01:15:00 +0330

Most Angular UI bugs come from screens modeled as scattered flags. Replace loading, error, empty, and ready booleans with one explicit state model your templates and reviewers can trust.

Angular Is Quietly Becoming AI-Tool Friendly: What MCP Server Support Changes for Real Teams

Wed, 27 May 2026 02:48:00 +0330

Angular's MCP Server tooling is not just an AI demo. It changes how teams can connect framework knowledge, local code, and coding assistants without losing their conventions.

The Hidden Cost of Nice Syntax: When Angular's New Template Features Make Code Harder to Reason About

Tue, 26 May 2026 02:48:00 +0330

Angular's newer template syntax is powerful, but spread/rest, arrow functions, multi-case switches, and richer control flow need team rules before clever templates become maintenance debt.

Signal Forms Aren't Just a Forms API Update: They Change How You Model UI State

Mon, 25 May 2026 02:48:00 +0330

Signal Forms push Angular forms toward explicit state modeling, where validation, submission, async work, and derived UI state live in the same reactive graph.

Migrating from React to Angular: A 'Ship of Theseus' Case Study in Production

Thu, 01 Jan 2026 02:25:59 +0330

A detailed look at why and how we migrated a core legacy React application to Angular in a high-stakes FinTech environment using the Strangler Fig pattern.

Angular Signals and Control Theory: A New Reactivity Model

Wed, 24 Dec 2025 02:20:31 +0330

Explore the connection between Control Theory and Angular's new Signals-based reactivity model for better frontend performance.

Unlocking the Power of Angular's `@ViewChild` and `@ContentChild`

Sun, 08 Sep 2024 12:56:55 +0330

Angular’s @ViewChild and @ContentChild decorators provide a powerful way to interact with child components, DOM elements, and projected content within a component’s template. While they are often misunderstood or used interchangeably, each has its own specific purpose and use cases.

In this comprehensive guide, we’ll dive deep into both decorators, understanding their differences, use cases, and best practices. Additionally, we’ll explore advanced techniques for leveraging them in various scenarios and edge cases, complete with sample code for hands-on understanding.

Migrating from REST to GraphQL: A Step-by-Step Guide for Express.js and Angular

Wed, 07 Aug 2024 02:20:56 +0330

In today’s rapidly evolving web development landscape, GraphQL has emerged as a powerful alternative to traditional REST APIs. This blog post will guide you through the process of migrating your Express.js backend and Angular frontend from REST to GraphQL, unlocking the benefits of a more flexible and efficient API architecture.

1. Introduction

REST (Representational State Transfer) has been the go-to architectural style for building web APIs for many years. However, GraphQL, developed by Facebook, offers several advantages:

Creating Dynamic Music Visualizations with Angular and the Web Audio API

Sat, 13 Jul 2024 17:43:38 +0330

Music visualization has always been a fascinating way to enhance the auditory experience, offering a visual representation of sound that can be both mesmerizing and informative. With the power of modern web technologies like Angular and the Web Audio API, creating dynamic music visualizations is more accessible than ever. This blog post will guide you through the process of building an engaging music visualization application using Angular and the Web Audio API.

Building a Distributed Tracing System with OpenTelemetry in Angular Applications

Fri, 28 Jun 2024 12:31:41 +0330

In today’s complex microservices architectures, understanding the flow of requests and pinpointing performance bottlenecks can be challenging. This is where distributed tracing comes into play, and OpenTelemetry provides a powerful toolkit for implementing it. In this post, we’ll explore how to build a distributed tracing system for Angular applications using OpenTelemetry, with a focus on microservices architecture and performance monitoring.

What is a Distributed Tracing System?

A distributed tracing system is a method of tracking and analyzing requests as they flow through various services in a distributed system. It provides a holistic view of how a request propagates through different components, helping developers identify bottlenecks, troubleshoot issues, and optimize performance.

Implementing Custom Web Components in Angular with Stencil.js

Wed, 26 Jun 2024 05:01:11 +0330

In modern web development, the ability to create reusable components that work across different frameworks and libraries is crucial. This is where Web Components come into play. Web Components allow developers to create custom, reusable HTML elements with encapsulated functionality and styling. However, building Web Components from scratch can be complex and time-consuming. Enter Stencil.js, a powerful tool that simplifies the creation of Web Components.

In this guide, we’ll explore how to create custom Web Components using Stencil.js and seamlessly integrate them into Angular applications. Whether you’re an experienced developer or just getting started, this comprehensive guide will walk you through each step of the process.

Building a Decentralized Application (DApp) with Angular and Ethereum

Tue, 25 Jun 2024 01:59:23 +0330

In recent years, decentralized applications (DApps) have emerged as a groundbreaking paradigm in the world of software development. Unlike traditional applications that run on centralized servers, DApps operate on blockchain technology, which offers enhanced security, transparency, and decentralization. This guide will walk you through the process of creating a DApp using Angular and Ethereum, including smart contract development with Solidity.

What is a Decentralized Application (DApp)?

A DApp is an application that runs on a decentralized network, typically a blockchain. Unlike conventional applications, DApps leverage the decentralized nature of blockchain to provide a higher level of security and trust. Key features of DApps include:

Building a Real-Time Collaborative Editor with Angular, Firebase, and WebRTC: A Step-by-Step Guide

Mon, 24 Jun 2024 02:03:44 +0330

Creating a real-time collaborative text editor can be a challenging but rewarding project. In this guide, we’ll walk you through the process of building a real-time collaborative editor using Angular, Firebase, and WebRTC. By the end of this tutorial, you’ll have a working understanding of these technologies and how to integrate them to create a seamless, real-time collaborative experience.

Introduction

Real-time collaborative applications are increasingly popular in today’s digital world. They allow multiple users to work on the same document simultaneously, seeing each other’s changes in real time. Google Docs is a prime example of such an application. In this tutorial, we will build a similar application using modern web technologies.

Optimizing Angular Applications with Web Workers and OffscreenCanvas

Sun, 23 Jun 2024 01:52:51 +0330

In today’s web development landscape, performance is king. Users expect fast, responsive applications that perform smoothly even under heavy loads. This expectation places a significant burden on developers, especially those working with complex front-end frameworks like Angular. One effective strategy for enhancing the performance of Angular applications is to leverage Web Workers and OffscreenCanvas. In this detailed guide, we will explore how to use these technologies to offload heavy computations and rendering tasks, thus optimizing your Angular applications for better performance.

Advanced Angular Change Detection: Strategies for High-Performance Applications

Wed, 19 Jun 2024 01:14:27 +0330

When it comes to building high-performance applications with Angular, understanding and optimizing change detection is crucial. This blog post will delve into advanced change detection strategies that can help you optimize the performance of your Angular applications. We will cover the OnPush change detection strategy, the importance of immutability, and techniques for manual change detection.

Introduction to Angular Change Detection

Change detection is a mechanism that Angular uses to keep the view in sync with the underlying model. Whenever a component’s state changes, Angular detects this change and updates the DOM accordingly. This process, while automated and convenient, can become a performance bottleneck if not managed properly, especially in large and complex applications.

Advanced Dependency Injection Techniques in Angular: Tree-Shakable Providers and Injection Tokens

Mon, 17 Jun 2024 02:16:21 +0330

Dependency Injection (DI) is a fundamental design pattern in Angular that allows for the efficient management of dependencies within an application. By using DI, Angular promotes the principle of Inversion of Control (IoC), where the control of creating and managing dependencies is inverted from the component itself to an external framework. This results in more modular, testable, and maintainable code. In this post, we will explore two advanced DI techniques in Angular: Tree-Shakable Providers and Injection Tokens.

Security Best Practices in Angular: Protecting Your Applications

Mon, 03 Jun 2024 03:24:43 +0330

In the world of web development, security is paramount. As developers, we strive to build robust and secure applications that protect user data and ensure a seamless user experience. Angular, being one of the most popular frameworks for building web applications, offers several features and best practices to enhance the security of your applications. In this post, we’ll delve into advanced security topics such as XSS protection, CSRF prevention, JWT authentication, and secure HTTP headers. Let’s explore how you can safeguard your Angular applications.

Building Custom Angular Schematics: Automating Code Generation

Mon, 03 Jun 2024 02:13:06 +0330

In the fast-paced world of web development, efficiency and consistency are key. Repetitive tasks can slow down productivity, and inconsistent code can lead to maintenance nightmares. Enter Angular Schematics—a powerful tool to automate code generation, enforce architectural standards, and improve code quality. In this comprehensive guide, we’ll delve into creating custom Angular schematics, helping you streamline your development workflow and ensure your codebase remains robust and maintainable.

What are Angular Schematics?

Angular Schematics are code generators that transform a software project by creating, modifying, or removing files and code snippets. They’re integral to the Angular CLI (Command Line Interface) and are used to scaffold new applications, add features, and enforce best practices.

Integrating GraphQL with Angular: A Practical Guide

Sat, 01 Jun 2024 00:50:01 +0330

GraphQL is a powerful query language for APIs, providing a flexible and efficient alternative to REST. Combining it with Angular, a robust front-end framework, can lead to highly dynamic and responsive web applications. In this guide, we’ll explore how to integrate GraphQL with Angular, leveraging the Apollo Client for seamless data management.

1. Introduction to GraphQL and Angular

What is GraphQL?

GraphQL is an open-source data query language developed by Facebook. It allows clients to request exactly the data they need, making APIs more flexible and efficient.

Design Patterns in Angular: Enhancing Code Quality and Maintainability

Fri, 31 May 2024 23:52:23 +0330

Angular, one of the most popular frameworks for building robust web applications, provides a comprehensive toolkit for developers. However, to truly harness its power, understanding and applying design patterns is crucial. Design patterns offer proven solutions to common problems, making your code more organized, reusable, and maintainable. In this blog post, we’ll delve into some advanced design patterns and their application in Angular, helping you enhance your code quality and maintainability.