DEV Community: Chandan Kumar

How to Replace BehaviorSubject with signal() in Angular

Chandan Kumar — Sun, 27 Jul 2025 13:35:40 +0000

Angular 17+ introduced a new way to handle reactive state using signals, which can be simpler than using RxJS BehaviorSubject in many cases. Let’s learn how to switch from BehaviorSubject to signals.

Introduction:

Are you using BehaviorSubject in Angular to manage your app’s state? It works well, but now there’s a better and easier way with Angular 17+ it's called signal().

In this blog, you’ll learn how to replace BehaviorSubject with signal() using a simple example. Let’s make Angular development easier!

Why Change from BehaviorSubject to Signals?

BehaviorSubject works well but has some drawbacks:

Requires .next() to update values
Needs manual subscription management
Can lead to complex code

Signals are better because:
✔️ Easier to use
✔️ No manual subscriptions/unsubscriptions
✔️ Better performance
✔️ Works perfectly with Angular templates

Before: Using BehaviorSubject

Here’s how you might use BehaviorSubject in a service:

@Injectable({ providedIn: 'root' })
export class UserService {
  private userSubject = new BehaviorSubject<User | null>(null);
  user$ = this.userSubject.asObservable();

  setUser(user: User) {
    this.userSubject.next(user);
  }

  clearUser() {
    this.userSubject.next(null);
  }
}

And in the component:

export class ProfileComponent implements OnInit {
  user: User | null = null;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.user$.subscribe(user => {
      this.user = user;
    });
  }
}

After: Using signal()Angular’s new signal() function makes the same logic much simpler:

Updated Service

import { Injectable, signal } from '@angular/core';
import { User } from './user.model';

@Injectable({ providedIn: 'root' })
export class UserService {
  private user = signal<User | null>(null);

  getUser = this.user.asReadonly();// Makes signal read-only

  setUser(user: User) {
    this.user.set(user);// Updates value
  }

  clearUser() {
    this.user.set(null);
  }
}

Updated Component

export class ProfileComponent {
  user = this.userService.getUser();// Automatically reactive!

  constructor(private userService: UserService) {}
}

Now you don’t need manual subscriptions or ngOnInit!

Just like that, you’ve eliminated the need for manual subscription/unsubscription and made the state reactive by default!

Benefits of Switching to signal()

| Feature               | BehaviorSubject           | signal()              |
| --------------------- | ------------------------- | --------------------- |
| Boilerplate           | High                      | Low                   |
| Subscriptions         | Required                  | Not Required          |
| Memory Leaks Risk     | Yes (without unsubscribe) | No                    |
| Type-Safe Access      | Not always                | Always                |
| Integration with View | Manual                    | Seamless in templates |

Using Signals in Templates

You can directly use signals in templates:

<div *ngIf="user(); else guest">
  Welcome, {{ user().name }}!
</div>
<ng-template #guest>
  Please log in.
</ng-template>

Notice user() – this is how you read a signal's value.

When to Use Signals

Simple state management (auth status, loading flags)
UI state (theme, sidebar toggle)
Derived values (using computed())

Migration Tips

Use signal() for simple reactive values.
Use computed() for derived states.
Avoid combining signals with observables unless necessary.
Replace .next() with .set() or .update().

Conclusion

Signals make Angular state management simpler and more efficient. While RxJS is still useful for complex async operations, signals are great for most reactive state needs.

Start by converting one service to signals and see the difference!

Stay Updated

Follow me for more design tips and tools! ✨

🐙 GitHub: Follow me for more web development resources.
🔗 LinkedIn: Connect with me for tips and tricks in coding.
✍️ Medium: Follow me for in-depth articles on web development.
📬 Substack: Dive into my newsletter for exclusive insights and updates:
🌐 Bento — Explore all my work in one place.
🧭 Linktree — Access my resources, blogs, and social links easily

Top 9 Hidden Free AI Tools for Web Developers in 2025

Chandan Kumar — Sun, 25 May 2025 08:31:46 +0000

Artificial intelligence is transforming web development, automating repetitive tasks, enhancing user experiences, and accelerating project timelines. While mainstream tools like GitHub Copilot and ChatGPT get much of the spotlight, there are lesser-known free AI tools that can be game-changers for web developers. Below, we explore 10 hidden gems that offer powerful features for coding, design, testing, and content creation — all available at no cost in 2025.

1. Windsurf
What it does: windsurf is an AI-powered code completion tool that rivals GitHub Copilot, offering real-time suggestions for multiple programming languages like JavaScript, Python, and HTML. It’s unique for its ethical stance, avoiding training on non-permissive code to reduce licensing risks.
Why it’s great: Completely free for individual developers with no hidden catches, it integrates seamlessly with IDEs like VS Code and supports code generation, debugging, and explanation.
Use case: Autocomplete code snippets or translate code between languages, such as Python to JavaScript.
Get started: Visit windsurf and install their extension for your IDE.

2. Uizard
What it does: Uizard transforms hand-drawn sketches or mockups into responsive, cross-browser-compatible website prototypes using AI.
Why it’s great: Its free plan is ideal for startups or solo developers, allowing rapid prototyping without coding. It’s perfect for turning ideas into clickable designs quickly.
Use case: Create a website prototype from a napkin sketch in minutes for client presentations.
Get started: Sign up at Uizard and upload your sketches.

3. FlowiseAI
What it does: FlowiseAI is a low-code platform for building AI-powered chatbots and workflow automation tools with a drag-and-drop interface.
Why it’s great: Designed for non-developers, it integrates with platforms like Slack and Google Drive, making it easy to add AI-driven chatbots to websites.
Use case: Automate customer service on your web app with a custom chatbot.
Get started: Explore FlowiseAI and use their free tier.

4. Void Editor
What it does: Void Editor is an open-source, AI-assisted code editor offering auto-completion, debugging, and integrated AI chat support.
Why it’s great: Its lightweight design and seamless GitHub integration make it a hidden gem for developers seeking a free, efficient coding environment.
Use case: Write and debug JavaScript or CSS faster with intelligent suggestions.
Get started: Check out Void Editor for their open-source setup.

5. AutoRegex
What it does: AutoRegex uses AI to generate regular expressions from plain English descriptions, simplifying a notoriously tricky task.
Why it’s great: Completely free and powered by OpenAI’s GPT-3, it saves hours of trial-and-error for developers working with regex.
Use case: Generate a regex pattern to validate email addresses by describing it in natural language.
Get started: Try it at AutoRegex.

6. TEXT2SQL.AI
What it does: TEXT2SQL.AI translates natural language into SQL queries, making database management accessible without deep SQL knowledge.
Why it’s great: Free and open-source, it supports query generation, explanation, and optimization, perfect for web developers working with backend databases.
Use case: Generate a SQL query to fetch user data from a database using a simple prompt.
Get started: Access it at TEXT2SQL.AI.

7. GitFluence
What it does: GitFluence generates Git commands from text descriptions, streamlining version control tasks.
Why it’s great: Free and AI-driven, it reduces the need to memorize complex Git commands, saving time for developers.
Use case: Get the exact Git command to merge a branch by describing your goal.
Get started: Try GitFluence online.

8. Pieces
What it does: Pieces is an on-device AI copilot that enhances developer productivity by capturing, enriching, and reusing code snippets.
Why it’s great: Fully free and privacy-focused, it works offline and integrates with browsers and IDEs, offering contextual code suggestions.
Use case: Store and retrieve reusable code snippets for faster front-end development.
Get started: Download at Pieces.

9. Theia IDE
What it does: Theia IDE is an open-source, web-based IDE with AI-powered features like code completion, chat, and custom agents using large language models.
Why it’s great: Free and extensible, it supports over 70 languages and provides a collaborative environment for teams.
Use case: Develop a full-stack web app with AI-assisted coding in a browser-based IDE.
Get started: Explore Theia IDE and its AI features.

Why These Tools Matter
These hidden AI tools empower web developers to work smarter, not harder. From automating code generation to simplifying prototyping and database management, they address niche pain points often overlooked by mainstream solutions. Most offer free tiers with robust features, making them accessible to freelancers, startups, and hobbyists. By integrating these tools into your workflow, you can save time, reduce errors, and focus on the creative aspects of web development.

Tips for Using AI Tools
Experiment Freely: Since these tools are free, test them to find the best fit for your projects.
Combine Tools: Use DiagramGPT for visualization alongside Codeium for coding to streamline workflows.
Check Limitations: Free tiers may have usage caps, so review terms before scaling projects.
Stay Updated: AI tools evolve rapidly, so check for updates to access new features.
Conclusion
In 2025, these 9 hidden free AI tools offer web developers powerful ways to enhance productivity and creativity without financial barriers. Whether you’re prototyping with Uizard, generating regex with AutoRegex, or automating Git commands with GitFluence, these tools can transform your workflow. Try them out, share your experiences, and let us know your favorite in the comments below!

📌 Stay Updated
Follow me for more design tips and tools! ✨

10 Secret Angular Tricks for Better Performance and Cleaner Code

Chandan Kumar — Tue, 20 May 2025 19:23:52 +0000

Angular is a powerful framework for building dynamic web applications, but some of its lesser-known features and techniques can significantly boost your productivity and application performance. Below, we explore 10 hidden techniques that every Angular developer should know to write cleaner, more efficient code.

1. Lazy Loading Modules for Performance
Lazy loading allows you to load Angular modules only when they are needed, reducing the initial bundle size and improving load times. Use the loadChildren property in your routing module to defer loading of feature modules.

Example:

const routes: Routes = [ { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) } ];
2. TrackBy in *ngFor for Optimized Rendering
When using *ngFor to iterate over lists, Angular re-renders the entire list on changes. By adding a trackBy function, you can tell Angular to track items by a unique identifier, improving performance by only updating changed items.

Example:

`// In component
trackByFn(index: number, item: any): number {
return item.id; // Use unique identifier
}
// In template

{{ item.name }}`
3. Change Detection OnPush Strategy
The OnPush change detection strategy reduces unnecessary checks by only running change detection when input properties change or an event is triggered. This can significantly improve performance in large applications.

Example:
@Component({ selector: 'app-my-component', template: '...', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyComponent {}
4. Using RxJS fromEvent for Custom Events
Instead of relying on Angular’s event bindings, you can use RxJS’s fromEvent to handle custom DOM events or third-party library events, providing more control and reactive programming benefits.

Example:

import { fromEvent } from 'rxjs'; ngOnInit() { fromEvent(document, 'customEvent').subscribe(event => { console.log('Custom event triggered:', event); }); }
5. Dynamic Component Loading with ComponentFactoryResolver
Dynamically create components at runtime using ComponentFactoryResolver. This is useful for scenarios like modals or widgets that need to be injected dynamically.

Example:

constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {} loadComponent(component: Type) { const factory = this.resolver.resolveComponentFactory(component); this.container.createComponent(factory); }
6. NgZone for Performance Optimization
Run specific tasks outside Angular’s zone to prevent unnecessary change detection cycles. This is particularly useful for third-party libraries or heavy computations.

Example:

constructor(private ngZone: NgZone) {} runOutsideAngular() { this.ngZone.runOutsideAngular(() => { // Perform heavy task without triggering change detection }); }
7. Custom Pipe Caching with Pure Pipes
Angular’s pure pipes are only re-evaluated when their inputs change. Create custom pure pipes to cache expensive computations, improving performance for repeated calculations.

Example:
@Pipe({ name: 'expensiveCalculation', pure: true }) export class ExpensiveCalculationPipe implements PipeTransform { transform(value: number): number { // Expensive computation return value * 100; } }
8. Using providedIn: ‘root’ for Services
The providedIn: 'root' syntax for injectable services ensures singleton instances and enables tree-shaking, reducing bundle size by removing unused services.

`Example:

@Injectable({
providedIn: 'root'
})
export class MyService {}`
9. NgTemplateOutlet for Reusable Templates
Use NgTemplateOutlet to create reusable template fragments, reducing code duplication and improving maintainability.

Example:
`

`
10. Resolver for Pre-fetching Data
Use Angular resolvers to fetch data before navigating to a route, ensuring the component has the necessary data when it renders, improving user experience.

Example:

@Injectable({ providedIn: 'root' }) export class DataResolver implements Resolve<any> { constructor(private service: DataService) {} resolve() { return this.service.getData(); } } // In routing module const routes: Routes = [ { path: 'data', component: DataComponent, resolve: { data: DataResolver } } ];
Conclusion
These hidden Angular techniques can help you write more efficient, maintainable, and performant applications. By leveraging lazy loading, optimized change detection, RxJS, and other advanced features, you can take your Angular development to the next level. Experiment with these techniques in your projects to see immediate improvements in performance and code quality.

📌 Stay Updated
Follow me for more design tips and tools! ✨

Top 15 VSCode Extensions Every Angular Developer Should Know About

Chandan Kumar — Sat, 17 May 2025 14:05:34 +0000

Angular is a robust framework for crafting dynamic, scalable web applications. As an Angular developer, your efficiency depends heavily on your tools, and Visual Studio Code (VSCode) is a favorite due to its flexibility and rich extension ecosystem. With the right extensions, you can streamline coding, debugging, and testing in your Angular projects. In this article, we’ll explore the top 15 VSCode extensions that every Angular developer should have to supercharge their workflow.

Why VSCode for Angular Development?
VSCode is lightweight, customizable, and packed with features like IntelliSense, built-in Git support, and debugging tools. Its marketplace offers extensions tailored for Angular, simplifying tasks like template editing, code generation, and monorepo management. Whether you’re building a small app or a complex enterprise solution, these extensions will elevate your productivity.

Let’s dive into the top 15 extensions you need in your VSCode setup.

1. Angular Language Service
Developed by the Angular team, the Angular Language Service enhances template development with:

Auto-completion for component properties, directives, and pipes.
Real-time diagnostics to catch template and TypeScript errors.
Go-to-definition for quick navigation to component logic.
Why it’s essential: Boosts template productivity and minimizes errors with intelligent suggestions.

Install: Search “Angular Language Service” or use ID: angular.ng-template.

2. Prettier — Code Formatter
Prettier ensures consistent code styling across your Angular project by auto-formatting TypeScript, HTML, CSS, and JavaScript.

Formats on save for a clean codebase.
Supports Angular templates when paired with linting tools.
Customizable to align with team standards.
Why it’s essential: Saves time and keeps your components and services polished.

Install: Search “Prettier — Code Formatter” or use ID: esbenp.prettier-vscode.

Tip: Combine with angular.json linting for seamless formatting.

3. ESLint
ESLint enforces code quality with real-time linting, especially when paired with @angular-eslint for Angular-specific rules.

Detects errors and enforces best practices.
Auto-fixes issues on save.
Angular-specific linting for components, directives, and more.
Why it’s essential: Maintains a clean, maintainable Angular codebase.

Install: Search “ESLint” or use ID: dbaeumer.vscode-eslint. Run ng add @angular-eslint/schematics for setup.

4. Auto Rename Tag
Auto Rename Tag syncs HTML/XML tag pairs, making template editing faster and error-free.

Auto-updates closing tags when editing opening tags.
Supports Angular directives like *ngIf or *ngFor.
Reduces manual fixes in templates.
Why it’s essential: Speeds up template refactoring in Angular components.

Install: Search “Auto Rename Tag” or use ID: formulahendry.auto-rename-tag.

5. Angular Snippets
Angular Snippets by John Papa provides shortcuts for generating Angular boilerplate code.

Snippets for components (a-component), services (a-service), and more.
Aligns with Angular CLI conventions.
Speeds up repetitive tasks.
Why it’s essential: Cuts down on manual typing for faster development.

Install: Search “Angular Snippets” or use ID: johnpapa.angular2-snippets.

6. Nx Console
Nx Console is a must for Angular developers working in monorepos using Nx.

Graphical interface for Nx commands like ng generate or nx test.
Visualizes workspace dependencies.
Generates components and libraries without the terminal.
Why it’s essential: Simplifies monorepo workflows for large Angular projects.

Install: Search “Nx Console” or use ID: nrwl.angular-console. Requires an Nx workspace (npx create-nx-workspace).

7. GitLens
GitLens enhances Git integration, making version control seamless for Angular teams.

Inline blame to track code changes.
Commit history and branch exploration.
Merge conflict resolution tools.
Why it’s essential: Improves collaboration and code tracking.

Install: Search “GitLens” or use ID: eamodio.gitlens.

8. Debugger for Chrome
Debugger for Chrome lets you debug Angular apps directly in VSCode.

Breakpoints in TypeScript for precise debugging.
Live reloading for real-time testing.
Integrates with Angular CLI builds.
Why it’s essential: Simplifies debugging complex Angular logic.

Install: Search “Debugger for Chrome” or use ID: msjsdiag.debugger-for-chrome. Configure launch.json for Chrome.

9. Path Intellisense
Path Intellisense autocompletes file paths in your Angular project, saving time when importing modules or assets.

Suggests file and folder names as you type.
Supports TypeScript imports and template URLs.
Reduces typos in paths.
Why it’s essential: Speeds up imports in large Angular projects.

Install: Search “Path Intellisense” or use ID: christian-kohler.path-intellisense.

10. Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 color-codes matching brackets, making it easier to navigate nested Angular code.

Highlights matching brackets in TypeScript and HTML.
Improves readability in complex components.
Customizable colors for clarity.
Why it’s essential: Enhances code navigation in dense Angular files.

Install: Search “Bracket Pair Colorizer 2” or use ID: coenraads.bracket-pair-colorizer-2.

11. REST Client
REST Client lets you test HTTP requests directly in VSCode, ideal for Angular apps interacting with APIs.

Send GET, POST, etc., from .http files.
View responses without leaving the editor.
Supports environment variables for API testing.
Why it’s essential: Streamlines API testing during Angular development.

Install: Search “REST Client” or use ID: humao.rest-client.
**

Angular Switcher** Angular Switcher simplifies navigation between related Angular files (e.g., .ts, .html, .css).

Quickly toggle between component files.
Keyboard shortcuts for faster workflows.
Supports Angular project structures.
Why it’s essential: Saves time when working on component logic and templates.

Install: Search “Angular Switcher” or use ID: stringham.angular-switcher.

13. Test Explorer UI
Test Explorer UI provides a visual interface for running and debugging Angular unit tests with frameworks like Jasmine or Karma.

Run tests from a sidebar.
View test results and failures.
Debug tests with breakpoints.
Why it’s essential: Makes test-driven development in Angular more efficient.

Install: Search “Test Explorer UI” or use ID: hbenl.vscode-test-explorer. Pair with vscode-karma-test-adapter for Karma support.

14. Code Spell Checker
Code Spell Checker catches typos in your Angular code, comments, and templates.

Highlights spelling errors in real time.
Supports camelCase for variable names.
Custom dictionaries for project-specific terms.
Why it’s essential: Ensures professional, error-free code and documentation.

Install: Search “Code Spell Checker” or use ID: streetsidesoftware.code-spell-checker.

15. TODO Highlight
TODO Highlight marks TODO, FIXME, and other annotations in your Angular codebase.

Highlights comments for easy tracking.
Customizable keywords and styles.
Helps prioritize tasks in large projects.
Why it’s essential: Keeps your Angular project organized and focused.

Install: Search “TODO Highlight” or use ID: wayou.vscode-todo-highlight.

Conclusion
These 15 VSCode extensions are game-changers for Angular developers, covering everything from template editing to debugging, testing, and version control. By integrating tools like Angular Language Service, Nx Console, and REST Client into your workflow, you’ll write cleaner code, catch errors faster, and ship Angular apps with confidence. Install these extensions, tweak their settings for your project, and take your productivity to the next level.

What’s your go-to VSCode extension for Angular? Drop your thoughts in the comments, and let’s keep the conversation going!

📌 Stay Updated
Follow me for more design tips and tools! ✨