BACK TO BLOG
ANGULAR 10 SEP 2026 · 3 MIN READ

Angular 22's New @Service Decorator: What Changed and Why It Matters

A short comparison of @Service and @Injectable, with factory examples and the author's implementation notes.

Ali Gamal Ali

Lead Front-End Developer · Luftborn


// QUICK REACTIONS

Enjoyed this article? Leave a signal without writing a comment.

I’ve been using @Injectable for years. We all have. It’s just… Angular. You don’t question it.
But Angular 22 ships @Service and after playing with it, I realized it’s a genuinely different way of thinking.


⚙️ How Angular Creates the Instance

@Injectable @Service
Instantiation Angular calls new YourClass() Uses the return value of your factory directly
Class body Holds your real logic Becomes pure TypeScript types
Control Angular-managed You control what gets exposed

🔒 Privacy Without the Boilerplate

With @Injectable, you need extra keywords and annotations to hide your internals.

With @Service, any variable inside the factory lives in the closure private by default, because of how JavaScript already works. No extra effort required.


🎯 The Ability to Destructuring

// ❌ @Injectable   
const { getData } = myService; // trap!

// ✅ @Service factory   destructuring just works
const { getData } = myService; // no binding needed

In @Service factories, there’s no class instance which means destructuring just works. No .bind(), no arrow function workarounds.


📦 What the Class Body Actually Does Now

  • @Injectable → holds your real runtime logic
  • @Service → class body is purely for TypeScript types; actual logic moves into the factory

Takes a minute to adjust, but it ends up feeling clean.


🔄 You Control What Gets Exposed

@Service({
    autoProvided: true,
     factory: () => {
    const secret = 'hidden';
    const publicMethod = () => `result`;

    return { publicMethod }; // expose only what you want
  }
})
class MyService {...}

@Injectable always returns the full class instance.
@Service lets you return an object, a subset of methods, or something entirely different.


✍️ Trade-offs to Know

  • ➕ Better encapsulation out of the box
  • ➕ No this binding issues
  • ➕ Leaner public API surface
  • ➖ A bit more upfront boilerplate (maintaining types + factory logic separately)

💡 Bottom Line

Angular keeps pushing toward code that’s easier to reason about. @Service isn’t a replacement for @Injectable overnight but if you care about encapsulation and predictable behavior, it’s worth a proper look.

Hint:

I might be mistaken in some places. I’m still working on figuring out how to use this factory and destructuring in a real-world example and scenario.

IT Would be awesome if you see something wrong and leave a comment on it so we all learn



Source: Original article on HackMD. Local review copy retrieved September 10, 2026.

// QUICK REACTIONS

Enjoyed this article? Leave a signal without writing a comment.


// DISCUSSION

Reader Comments (0)

Register or log in to leave a comment.

// NO COMMENTS YET