You Can Now Control What Binds to Your Component Inputs in Angular 22

I've been using withComponentInputBinding() since Angular 16 and honestly, it's one of my favorite router features. No more injecting ActivatedRoute, no more subscribing to params.

The short version

provideRouter(routes, withComponentInputBinding({ queryParams: false }))

That’s it. Query params no longer bind to your component inputs. Path params and route data? Still work fine.

So what was the problem?

Let me show you. Say you have this:

// Route: { path: 'user/:id', component: UserComponent, data: { role: 'admin' } }
// URL: /user/42?tab=settings

@Component({ ... })
export class UserComponent {
  id = input<string>();       // ← from :id
  tab = input<string>();      // ← from ?tab=
  role = input<string>();     // ← from route data
}

All three sources — path params, query params, route data — bind to your inputs automatically. Sounds great until you realize that query params are completely user-controlled. Anyone can type whatever they want in the URL bar.

Picture this: