{"id":1207,"date":"2026-03-11T15:51:36","date_gmt":"2026-03-11T18:51:36","guid":{"rendered":"https:\/\/maurobernal.com.ar\/blog\/?p=1207"},"modified":"2026-03-11T16:12:21","modified_gmt":"2026-03-11T19:12:21","slug":"angular-21-novedades-template-regex-spread-instanceof","status":"publish","type":"post","link":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/","title":{"rendered":"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s"},"content":{"rendered":"\n

Angular 21 trajo varias novedades al template que parecen peque\u00f1as pero cambian el d\u00eda a d\u00eda. Regex literals directamente en el HTML, spread operator en arrays y objetos, instanceof en expresiones, exhaustive switch blocks. Menos l\u00f3gica empujada al componente, m\u00e1s expresividad en el template.<\/p>\n\n\n\n

Regex literals en el template (v21)<\/h2>\n\n\n\n

Antes, si quer\u00eda filtrar con una expresi\u00f3n regular en el template, ten\u00eda que crear una propiedad en el componente. Ahora puedo usar el literal directamente.<\/p>\n\n\n\n

\/\/ Antes: declarar el regex en el componente\n\/\/ emailRegex = \/@empresa\\.com$\/;\n\n\/\/ Ahora: regex literal directo en el template\n@if (userEmail() | match: \/@empresa\\.com$\/) {\n  <span class=\"badge\">Email corporativo<\/span>\n}\n\n@if (\/^\\d{8}-\\d$\/.test(cuit())) {\n  <span class=\"valid\">CUIT v\u00e1lido<\/span>\n}<\/code><\/pre>\n\n\n\n
Spread operator en templates (v21.1)<\/h2>\n\n\n\n
\/\/ Spread de arrays\n@let todosLosItems = [...itemsActivos(), ...itemsArchivados()];\n\n@for (item of todosLosItems; track item.id) {\n  <li>{{ item.nombre }}<\/li>\n}\n\n\/\/ Spread de objetos en property binding\n<mi-componente [config]=\"{ ...configBase(), ...configOverride() }\" \/><\/code><\/pre>\n\n\n\n
instanceof en expresiones del template (v21.2)<\/h2>\n\n\n\n
\/\/ Antes: casteo forzado en el componente\n\/\/ get esError(): boolean { return this.resultado() instanceof Error; }\n\n\/\/ Ahora: directo en el template\n@if (resultado() instanceof Error) {\n  <app-error-display [error]=\"resultado()\" \/>\n} @else if (resultado() instanceof Array) {\n  <app-lista [items]=\"resultado()\" \/>\n} @else {\n  <app-detalle [dato]=\"resultado()\" \/>\n}<\/code><\/pre>\n\n\n\n
Exhaustive switch blocks (v21.2)<\/h2>\n\n\n\n
type Estado = 'activo' | 'pausado' | 'eliminado';\n\n@switch (usuario.estado()) {\n  @case ('activo') {\n    <span class=\"badge green\">Activo<\/span>\n  }\n  @case ('pausado') {\n    <span class=\"badge yellow\">Pausado<\/span>\n  }\n  @case ('eliminado') {\n    <span class=\"badge red\">Eliminado<\/span>\n  }\n  \/\/ Sin @default: el compilador verifica que todos los casos est\u00e9n cubiertos\n}<\/code><\/pre>\n\n\n\n
Multiple switch case matching (v21.1)<\/h2>\n\n\n\n
\/\/ M\u00faltiples valores en un @case\n@switch (rol()) {\n  @case ('admin', 'superadmin') {\n    <app-panel-admin \/>\n  }\n  @case ('editor', 'revisor') {\n    <app-panel-editor \/>\n  }\n  @default {\n    <app-panel-usuario \/>\n  }\n}<\/code><\/pre>\n\n\n\n
@let: variables locales en el template<\/h2>\n\n\n\n
\/\/ Sin @let: el Signal se eval\u00faa 3 veces\n<p>Hola, {{ usuario().nombre }}<\/p>\n<p>Email: {{ usuario().email }}<\/p>\n<img [src]=\"usuario().avatar\" \/>\n\n\/\/ Con @let: evaluaci\u00f3n \u00fanica, m\u00e1s eficiente\n@let u = usuario();\n<p>Hola, {{ u.nombre }}<\/p>\n<p>Email: {{ u.email }}<\/p>\n<img [src]=\"u.avatar\" \/><\/code><\/pre>\n\n\n\n
ngTemplateOutlet con injector personalizado (v21.2)<\/h2>\n\n\n\n
<ng-container\n  [ngTemplateOutlet]=\"miTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: datos() }\"\n  [ngTemplateOutletInjector]=\"injectorPersonalizado\">\n<\/ng-container><\/code><\/pre>\n\n
\n
\u2190 Art\u00edculo anterior: Signal Forms: cuando los formularios reactivos finalmente tienen sentido<\/a> | Serie Angular 20 \u2192 21.2<\/strong> | Pr\u00f3ximo: Vitest reemplaza a Karma y Angular habla con tu IA: el nuevo ecosistema de herramientas \u2192<\/a><\/em><\/p>","protected":false},"excerpt":{"rendered":"
Regex literals, spread operator, instanceof, exhaustive switch, m\u00faltiples casos y @let en el template de Angular 21. M\u00e1s expresividad, menos l\u00f3gica en el componente.<\/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,275,282,278],"class_list":["post-1207","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-angular21","tag-frontend","tag-signals","tag-template","tag-typescript"],"yoast_head":"\nNovedades del template en Angular 21: regex, spread, instanceof y m\u00e1s · 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-novedades-template-regex-spread-instanceof\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s · devops Mauro Bernal\" \/>\n<meta property=\"og:description\" content=\"Regex literals, spread operator, instanceof, exhaustive switch, m\u00faltiples casos y @let en el template de Angular 21. M\u00e1s expresividad, menos l\u00f3gica en el componente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/\" \/>\n<meta property=\"og:site_name\" content=\"devops Mauro Bernal\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-11T18:51:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T19:12:21+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-novedades-template-regex-spread-instanceof\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/\"},\"author\":{\"name\":\"Mauro Bernal\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"headline\":\"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s\",\"datePublished\":\"2026-03-11T18:51:36+00:00\",\"dateModified\":\"2026-03-11T19:12:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/\"},\"wordCount\":155,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"keywords\":[\"angular\",\"angular21\",\"frontend\",\"signals\",\"template\",\"typescript\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/\",\"name\":\"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s · devops Mauro Bernal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\"},\"datePublished\":\"2026-03-11T18:51:36+00:00\",\"dateModified\":\"2026-03-11T19:12:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-novedades-template-regex-spread-instanceof\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s\"}]},{\"@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":"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s · 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-novedades-template-regex-spread-instanceof\/","og_locale":"es_ES","og_type":"article","og_title":"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s · devops Mauro Bernal","og_description":"Regex literals, spread operator, instanceof, exhaustive switch, m\u00faltiples casos y @let en el template de Angular 21. M\u00e1s expresividad, menos l\u00f3gica en el componente.","og_url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/","og_site_name":"devops Mauro Bernal","article_published_time":"2026-03-11T18:51:36+00:00","article_modified_time":"2026-03-11T19:12:21+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-novedades-template-regex-spread-instanceof\/#article","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/"},"author":{"name":"Mauro Bernal","@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"headline":"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s","datePublished":"2026-03-11T18:51:36+00:00","dateModified":"2026-03-11T19:12:21+00:00","mainEntityOfPage":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/"},"wordCount":155,"commentCount":0,"publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"keywords":["angular","angular21","frontend","signals","template","typescript"],"articleSection":["Angular"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/","url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/","name":"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s · devops Mauro Bernal","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#website"},"datePublished":"2026-03-11T18:51:36+00:00","dateModified":"2026-03-11T19:12:21+00:00","breadcrumb":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-novedades-template-regex-spread-instanceof\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/maurobernal.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"Novedades del template en Angular 21: regex, spread, instanceof y m\u00e1s"}]},{"@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\/1207","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=1207"}],"version-history":[{"count":3,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1207\/revisions"}],"predecessor-version":[{"id":1228,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1207\/revisions\/1228"}],"wp:attachment":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=1207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=1207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=1207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}