{"id":1209,"date":"2026-03-11T15:51:39","date_gmt":"2026-03-11T18:51:39","guid":{"rendered":"https:\/\/maurobernal.com.ar\/blog\/?p=1209"},"modified":"2026-03-11T16:12:25","modified_gmt":"2026-03-11T19:12:25","slug":"angular-21-router-signals-standalone-isactive","status":"publish","type":"post","link":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/","title":{"rendered":"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router"},"content":{"rendered":"\n

Siempre que necesitaba saber si una ruta estaba activa en Angular, inyectaba el Router completo y me suscrib\u00eda a los eventos. En componentes simples de navegaci\u00f3n, era matar moscas a ca\u00f1onazos. Angular 21 introduce funciones standalone que devuelven Signals \u2014 carg\u00e1s exactamente lo que necesit\u00e1s, sin m\u00e1s.<\/p>\n\n\n\n

El problema con inyectar el Router entero<\/h2>\n\n\n\n
\/\/ ❌ Antes: inyectar todo el Router para saber si una ruta est\u00e1 activa\nimport { Router, NavigationEnd } from '@angular\/router';\nimport { filter } from 'rxjs\/operators';\n\n@Component({ ... })\nexport class SidebarComponent implements OnInit, OnDestroy {\n  isDashboard = false;\n  private sub = Subscription.EMPTY;\n\n  constructor(private router: Router) {}\n\n  ngOnInit() {\n    this.sub = this.router.events\n      .pipe(filter(e => e instanceof NavigationEnd))\n      .subscribe(() => {\n        this.isDashboard = this.router.url === '\/dashboard';\n      });\n  }\n\n  ngOnDestroy() { this.sub.unsubscribe(); }\n}<\/code><\/pre>\n\n\n\n
isActive(): la funci\u00f3n standalone con Signal<\/h2>\n\n\n\n
\/\/ ✅ Angular 21: funci\u00f3n standalone, devuelve Signal\nimport { Component } from '@angular\/core';\nimport { isActive } from '@angular\/router';\nimport { RouterLink } from '@angular\/router';\n\n@Component({\n  selector: 'app-sidebar',\n  standalone: true,\n  imports: [RouterLink],\n  template: `\n    <nav>\n      <a routerLink=\"\/dashboard\" [class.active]=\"isDashboard()\">Dashboard<\/a>\n      <a routerLink=\"\/usuarios\" [class.active]=\"isUsuarios()\">Usuarios<\/a>\n      <a routerLink=\"\/reportes\" [class.active]=\"isReportes()\">Reportes<\/a>\n    <\/nav>\n  `\n})\nexport class SidebarComponent {\n  isDashboard = isActive('\/dashboard', { exact: true });\n  isUsuarios  = isActive('\/usuarios');\n  isReportes  = isActive('\/reportes');\n}<\/code><\/pre>\n\n\n\n
Otras funciones standalone del Router<\/h2>\n\n\n\n
import { isActive, currentRoute, routeParams, queryParams, routeData } from '@angular\/router';\n\n@Component({ ... })\nexport class DetalleComponent {\n  \/\/ Par\u00e1metros de ruta como Signal \u2014 sin ActivatedRoute\n  params     = routeParams();\n  usuarioId  = computed(() => this.params()['id']);\n\n  \/\/ Query params como Signal\n  qParams = queryParams();\n  pagina  = computed(() => Number(this.qParams()['page'] ?? 1));\n\n  \/\/ Data est\u00e1tica de la ruta\n  data   = routeData();\n  titulo = computed(() => this.data()['titulo'] ?? 'Sin t\u00edtulo');\n}<\/code><\/pre>\n\n\n\n
Navigation API experimental (v21.0)<\/h2>\n\n\n\n
\/\/ app.config.ts \u2014 habilitar Navigation API experimental\nimport { provideExperimentalNavigationApi } from '@angular\/common';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes),\n    provideExperimentalNavigationApi()\n  ]\n};<\/code><\/pre>\n\n\n\n
Location strategies: control sobre el trailing slash (v21.2)<\/h2>\n\n\n\n
export const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes, withRouterConfig({\n      trailingSlash: 'never'  \/\/ 'always' | 'never' | 'preserve'\n    }))\n  ]\n};<\/code><\/pre>\n\n\n\n
Por qu\u00e9 el tree-shaking importa<\/h2>\n\n\n\n
Con las funciones standalone, el bundler puede eliminar del bundle final todo el c\u00f3digo del Router que no se usa. Si solo us\u00e1s isActive<\/code> y routeParams<\/code>, el resto no viaja al usuario. En aplicaciones grandes esto puede reducir el bundle inicial de forma significativa \u2014 especialmente relevante en conexiones m\u00f3viles lentas.<\/p>\n\n
\n
\u2190 Art\u00edculo anterior: Vitest reemplaza a Karma y Angular habla con tu IA: el nuevo ecosistema de herramientas<\/a> | Serie Angular 20 \u2192 21.2<\/strong> | Pr\u00f3ximo: Gu\u00eda pr\u00e1ctica: c\u00f3mo migr\u00e9 un proyecto de Angular 19\/20 a Angular 21.2 sin morir en el intento \u2192<\/a><\/em><\/p>","protected":false},"excerpt":{"rendered":"
isActive(), routeParams(), queryParams(): funciones standalone con Signals que reemplazan la inyecci\u00f3n del Router completo. Mejor tree-shaking y menos boilerplate en componentes de navegaci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[273],"tags":[274,291,276,287,275,288,278],"class_list":["post-1209","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-angular21","tag-frontend","tag-router","tag-signals","tag-standalone","tag-typescript"],"yoast_head":"\nRouter Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router · devops Mauro Bernal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router · devops Mauro Bernal\" \/>\n<meta property=\"og:description\" content=\"isActive(), routeParams(), queryParams(): funciones standalone con Signals que reemplazan la inyecci\u00f3n del Router completo. Mejor tree-shaking y menos boilerplate en componentes de navegaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/\" \/>\n<meta property=\"og:site_name\" content=\"devops Mauro Bernal\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-11T18:51:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T19:12:25+00:00\" \/>\n<meta name=\"author\" content=\"Mauro Bernal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_maurobernal\" \/>\n<meta name=\"twitter:site\" content=\"@_maurobernal\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mauro Bernal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/\"},\"author\":{\"name\":\"Mauro Bernal\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"headline\":\"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router\",\"datePublished\":\"2026-03-11T18:51:39+00:00\",\"dateModified\":\"2026-03-11T19:12:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/\"},\"wordCount\":190,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"keywords\":[\"angular\",\"angular21\",\"frontend\",\"router\",\"signals\",\"standalone\",\"typescript\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/\",\"name\":\"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router · devops Mauro Bernal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\"},\"datePublished\":\"2026-03-11T18:51:39+00:00\",\"dateModified\":\"2026-03-11T19:12:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-router-signals-standalone-isactive\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\",\"name\":\"devops Mauro Bernal\",\"description\":\"Cuando tu trabajo es hacer que las cosas funcionen bien...\",\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\",\"name\":\"Mauro Bernal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"width\":1740,\"height\":1740,\"caption\":\"Mauro Bernal\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\"},\"description\":\"Desarrollo de Sistemas en .Net, IT Callcenters, DBA de SQL Server, Mikrotik, Pentest y T\u00e9cnico consultor de Sistemas Bejerman\",\"sameAs\":[\"https:\\\/\\\/maurobernal.com.ar\",\"https:\\\/\\\/x.com\\\/_maurobernal\",\"https:\\\/\\\/youtube.com\\\/maurobernal\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router · devops Mauro Bernal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/","og_locale":"es_ES","og_type":"article","og_title":"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router · devops Mauro Bernal","og_description":"isActive(), routeParams(), queryParams(): funciones standalone con Signals que reemplazan la inyecci\u00f3n del Router completo. Mejor tree-shaking y menos boilerplate en componentes de navegaci\u00f3n.","og_url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/","og_site_name":"devops Mauro Bernal","article_published_time":"2026-03-11T18:51:39+00:00","article_modified_time":"2026-03-11T19:12:25+00:00","author":"Mauro Bernal","twitter_card":"summary_large_image","twitter_creator":"@_maurobernal","twitter_site":"@_maurobernal","twitter_misc":{"Escrito por":"Mauro Bernal","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/#article","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/"},"author":{"name":"Mauro Bernal","@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"headline":"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router","datePublished":"2026-03-11T18:51:39+00:00","dateModified":"2026-03-11T19:12:25+00:00","mainEntityOfPage":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/"},"wordCount":190,"commentCount":0,"publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"keywords":["angular","angular21","frontend","router","signals","standalone","typescript"],"articleSection":["Angular"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/","url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/","name":"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router · devops Mauro Bernal","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#website"},"datePublished":"2026-03-11T18:51:39+00:00","dateModified":"2026-03-11T19:12:25+00:00","breadcrumb":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-router-signals-standalone-isactive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/maurobernal.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"Router Signals en Angular 21: navegaci\u00f3n standalone sin cargar todo el Router"}]},{"@type":"WebSite","@id":"https:\/\/maurobernal.com.ar\/blog\/#website","url":"https:\/\/maurobernal.com.ar\/blog\/","name":"devops Mauro Bernal","description":"Cuando tu trabajo es hacer que las cosas funcionen bien...","publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/maurobernal.com.ar\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283","name":"Mauro Bernal","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","url":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","contentUrl":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","width":1740,"height":1740,"caption":"Mauro Bernal"},"logo":{"@id":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1"},"description":"Desarrollo de Sistemas en .Net, IT Callcenters, DBA de SQL Server, Mikrotik, Pentest y T\u00e9cnico consultor de Sistemas Bejerman","sameAs":["https:\/\/maurobernal.com.ar","https:\/\/x.com\/_maurobernal","https:\/\/youtube.com\/maurobernal"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=1209"}],"version-history":[{"count":3,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1209\/revisions"}],"predecessor-version":[{"id":1230,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1209\/revisions\/1230"}],"wp:attachment":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=1209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=1209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=1209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}