DEV Community: NG DELHI

🔍 Angular Challenge #1: Understanding OnPush Change Detection in Angular

Rohtash Sethi — Wed, 14 May 2025 19:53:16 +0000

Welcome to the Angular Daily Challenge Series, where we decode real-world Angular concepts through fun and practical coding puzzles. This article dives into a common interview-level topic: OnPush change detection in Angular.

Let's analyze today's challenge and uncover the behavior of ChangeDetectorRef and OnPush.

❓ Angular OnPush Change Detection Challenge

Here's the scenario:

@Component({
  selector: 'app-child',
  template: `
    <h1>Child Component</h1>
    <span>{{ data().text }}</span>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChildComponent {
  data = input.required<{ text: string }>();
}

@Component({
  template: `
    <h1>Parent Component</h1>
    <app-child [data]="data" />
  `,
})
export class ChangeDetectionComponent {
  #cdRef = inject(ChangeDetectorRef);
  data = { text: 'Hello from Parent!' };

  constructor() {
    setTimeout(() => {
      this.data.text = 'Updated from Parent!';
      // Ensure the change is visible in the OnPush child
      this.#cdRef.detectChanges();
    }, 3_000);
  }
}

✅ What Will Be Displayed in the Child After 3 Seconds?

✅ Output: "Updated from Parent!"

But why does this happen? Let's break it down with a deeper look into Angular's change detection system.

🧠 How Angular OnPush Works

When you use ChangeDetectionStrategy.OnPush, Angular skips checking the component’s template unless one of these occurs:

The component receives a new reference via input signal
An event happens inside the component
Change detection is manually triggered using ChangeDetectorRef

🔄 Why Mutation Doesn’t Trigger OnPush Detection

In our example, we changed:

this.data.text = 'Updated from Parent!';

This modifies a property of the object but doesn't change the object reference, so Angular doesn't detect this change on its own.

Hence, Angular won't rerender the child unless we force it using:

this.#cdRef.detectChanges();

This is how we manually notify Angular to run change detection for all components, including OnPush ones.

💡 Bonus Tip: `3_000` vs `3000` in JavaScript

You might have spotted:

setTimeout(() => { ... }, 3_000);

This is JavaScript numeric separator syntax introduced in ES2021. It’s functionally identical to 3000, but more readable.

✅ Benefits:

Easier to read large numbers (1_000_000, 3_000)
Especially useful for time intervals, byte sizes, and money values

✅ Use it in modern Angular projects, it improves code clarity without affecting performance.

🔍 Learnings Recap

Concept	Description
`ChangeDetectionStrategy.OnPush`	Optimizes performance by skipping change detection unless needed
`ChangeDetectorRef.detectChanges()`	Manually triggers Angular’s change detection
Mutating object properties	Doesn’t trigger OnPush if the reference is unchanged
`3_000` in `setTimeout`	JavaScript numeric separator for better readability

📣 Challenge for You: Can You Optimize This?

In this challenge, we manually triggered change detection. But is that always the best approach?

🔁 Explore These Alternatives:

✅ Use immutable patterns: Replace the object entirely using this.data = { text: 'Updated' }
⚡ Adopt Angular Signals (Angular 17+): Better reactivity with built-in efficiency
🧠 Try markForCheck() instead of detectChanges() in some cases

💬 What’s your go-to strategy for handling OnPush changes? Drop your ideas and code snippets in the comments!

🙌 Stay Connected

👨🏻‍💻 Follow Rohtash Sethi 👨‍💻🥷🌟 for daily Angular challenges, JavaScript insights, and performance tips!

We Use Angular: Discover the Companies Powering Their Products with Angular

Rohtash Sethi — Wed, 14 May 2025 19:10:47 +0000

Tired of hearing “Nobody uses Angular anymore”?

Ever been told to 'just switch to React'? Same. But what if I told you that Angular is quietly powering hundreds of real-world apps, from startups to enterprises?

Let’s put that myth to rest, with facts, logos, and code commits.

🎯 The Problem

As Angular developers, we’ve all been there:

"React is the default."

"Angular is too enterprise-y."

"Is anyone even hiring for Angular anymore?"

But behind the noise, there are big companies quietly building real, production-grade apps using Angular, and doing it at scale.

The only problem? This information is scattered, hard to find, and often not public.

🚀 The Solution: We Use Angular

Ng-Delhi, an Angular community from Delhi NCR (India), has launched the We Use Angular initiative — a GitHub-powered, open-source directory of companies using Angular.

🔗 👉 Visit the GitHub Repo

🧭 Why This Matters

Too often, developers struggle to find:

Companies that are committed to Angular
Jobs that match their Angular skillset
Proof that Angular is still very much alive

That’s where We Use Angular comes in.

✅ It showcases real-world usage

✅ Helps job-seekers target the right companies

✅ Celebrates Angular’s presence in the wild

“This initiative was born after mentoring juniors who were confused about Angular's future. We wanted to give them, and all of us, clarity and hope.”

🗂️ What You'll Find in the Repo

We’ve curated a list of companies that use Angular in production.

📦 The repo includes:

🌐 Company name + website
🏷️ Industry segment
📍 Region or headquarters
🏢 Work Mode (On-Site / Remote / Hybrid)
🧱 Tech Stack (Frontend + Backend + DB + Hosting, etc.)
🛠️ Angular usage context (if known)
🖼️ Logo gallery (coming soon!)

We’ve already listed 33+ companies, and it’s growing fast!

🙌 How You Can Contribute

You don’t have to be a Git master to help out. We’ve got multiple ways for you to participate:

🔧 Option 1: Raise a PR

Familiar with GitHub? Just fork the repo and submit a Pull Request.

💬 Option 2: Community Submissions (No Git Required!)

Tag @NgDelhi on LinkedIn with the company name
Reply to our LinkedIn announcement posts
🐛 Open a GitHub issue with the company details
📥 Drop details in our Ng Delhi community chat

Your one submission might help someone land their dream job.

🏆 Recognition & Credits

Every contributor gets public credit for their help in growing the Angular ecosystem!

✅ Your name will appear in the Contributors section of our GitHub repo
✅ We'll give shoutouts from the Ng Delhi LinkedIn page
✅ Top contributors will be featured in our leaderboards and events

Because your contributions matter, and should be seen by the community 🌟

📢 Spread the Word

If you believe in Angular and want to support the ecosystem, here’s how you can help:

⭐ Star the GitHub repo
🔁 Repost this blog or share it with your Angular circle
🧑‍💻 Contribute a company you know uses Angular

Let’s make Angular visible again. Let’s show the world: We Use Angular.

🧡 Final Thoughts

Angular isn’t dead — it’s thriving in companies that value structure, scale, and maintainability. We just need to make its impact visible.

Join us in this movement. Help us build a better map for Angular devs, job seekers, and tech leaders alike.

👥 About Ng-Delhi

We’re a passionate Angular community from Delhi NCR (India), dedicated to sharing knowledge, organizing meetups, and contributing to open-source.

🟦 Ng Delhi on LinkedIn
🐙 Ng Delhi on GitHub

💬 Your Turn!

🔥 Know a company that uses Angular?

🎯 Challenge yourself to submit just one today!

✍️ Like this post? Save it and share it.

⭐ Star the repo → We Use Angular on GitHub

💬 Comment below if you have a company to suggest!