{"id":6469,"date":"2025-07-31T17:22:48","date_gmt":"2025-07-31T21:22:48","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6469"},"modified":"2025-07-31T17:22:49","modified_gmt":"2025-07-31T21:22:49","slug":"announcing-ionic-8-7","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7","title":{"rendered":"Announcing Ionic 8.7"},"content":{"rendered":"\n<p>Ionic Framework 8.7 is here! This release delivers powerful new features that enhance developer productivity and user experience. From new CSS utility classes that streamline layout development to new Reorder events that provide fine-grained control, plus the latest Ionicons v8 update and Angular modal injection improvements, 8.7 brings the tools you need to create exceptional cross-platform applications.<\/p>\n\n\n\n<p>Discover the latest enhancements that make Ionic Framework even more powerful. \ud83d\udc47<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-reorder-events\">New Reorder Events<\/h2>\n\n\n\n<p>We&#8217;ve significantly improved the reorder experience with new events that provide better control and feedback during reorder operations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-events\">New Events<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>ionReorderStart<\/code> \u2014 Fires at the start of the reorder gesture without any details<\/li>\n\n\n\n<li><code>ionReorderMove<\/code> \u2014 Fires continuously during the gesture with <code>from<\/code> and <code>to<\/code> details for real-time feedback<\/li>\n\n\n\n<li><code>ionReorderEnd<\/code> \u2014 Fires at the end of the gesture with <code>from<\/code> and <code>to<\/code> details, even if they&#8217;re the same<\/li>\n<\/ul>\n\n\n\n<p><br>These events give developers fine-grained control over the reorder experience, enabling custom animations, validation, and state management during drag operations, such as dynamically showing or hiding icons and updating item order in real time as the user drags.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video device-demo\"><video height=\"840\" style=\"aspect-ratio: 386 \/ 840;\" width=\"386\" autoplay controls loop muted src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/reorder-start-end.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video device-demo\"><video height=\"840\" style=\"aspect-ratio: 386 \/ 840;\" width=\"386\" autoplay controls loop muted src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/reorder-move.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-deprecated-event\">Deprecated Event<\/h3>\n\n\n\n<p><code>ionItemReorder<\/code> has been deprecated in favor of <code>ionReorderEnd<\/code> to improve consistency across event names. Going forward, event names follow a structure of <strong>action + timing<\/strong> (such as <code>Start<\/code>, <code>Move<\/code>, or <code>End<\/code>) to make their purpose more explicit and to allow for better scalability as new events are added. <\/p>\n\n\n\n<p>If you are accessing\u00a0<code>event.detail.from<\/code>\u00a0or\u00a0<code>event.detail.to<\/code>\u00a0and relying on them being different you should now add checks as they are always emitted in\u00a0<code>ionReorderEnd<\/code>, even when they are the same.<\/p>\n\n\n\n<p><strong>Example Migration:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ Before\nreorderGroup.addEventListener(&#039;ionItemReorder&#039;, ({ detail }) =&gt; {\n  console.log(&#039;ionItemReorder: Dragged from index&#039;, detail.from, &#039;to&#039;, detail.to);\n  \n  detail.complete();\n});\n\n\/\/ After\nreorderGroup.addEventListener(&#039;ionReorderEnd&#039;, ({ detail }) =&gt; {\n  if (detail.from !== detail.to) {\n    console.log(&#039;ionReorderEnd: Dragged from index&#039;, detail.from, &#039;to&#039;, detail.to);\n  } else {\n    console.log(&#039;ionReorderEnd: No position change occurred&#039;);\n  }\n\n  detail.complete();\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>See the&nbsp;<a href=\"http:\/\/ionicframework.com\/docs\/api\/reorder-group\" target=\"_blank\" rel=\"noreferrer noopener\">Reorder Group documentation<\/a>&nbsp;and <a href=\"http:\/\/ionicframework.com\/docs\/api\/reorder#event-handling\" target=\"_blank\" rel=\"noreferrer noopener\">Reorder documentation<\/a> for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-datetime-highlighteddates-property\">New Datetime <code>highlightedDates<\/code> Property<\/h2>\n\n\n\n<p>The Datetime component now supports a new <code>border<\/code> property for <code>highlightedDates<\/code>, giving developers more control over the visual styling of highlighted dates.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large device-demo\">\n  <img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-473x1024.png\" alt=\"\" class=\"wp-image-6519 lazyload\" style=\"--smush-placeholder-width: 473px; --smush-placeholder-aspect-ratio: 473\/1024;border: 12px solid var(--c-carbon-100);\n    border-radius: 24px;\n    overflow: hidden\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-473x1024.png 473w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-139x300.png 139w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-768x1662.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-710x1536.png 710w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-946x2048.png 946w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates.png 1170w\" data-sizes=\"auto, (max-width: 473px) 100vw, 473px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-473x1024.png\" alt=\"\" class=\"wp-image-6519\" style=\"border: 12px solid var(--c-carbon-100);\n    border-radius: 24px;\n    overflow: hidden\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-473x1024.png 473w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-139x300.png 139w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-768x1662.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-710x1536.png 710w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates-946x2048.png 946w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/blog-8-7-datetime-highlighted-dates.png 1170w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/noscript>\n<\/figure>\n\n\n\n<p>See the&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/api\/datetime#highlighting-specific-dates\" target=\"_blank\" rel=\"noreferrer noopener\">Datetime documentation<\/a>&nbsp;for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-css-utility-classes\">New CSS Utility Classes<\/h2>\n\n\n\n<p>We&#8217;ve added a comprehensive set of new CSS utility classes for display and flexbox utilities, making it easier to create responsive and flexible layouts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-display-classes\">New Display Classes<\/h3>\n\n\n\n<p>Responsive <strong>display<\/strong> classes have been added with the following values: <code>none<\/code>, <code>inline<\/code>, <code>inline-block<\/code>, <code>block<\/code>, <code>flex<\/code>, <code>inline-flex<\/code>, <code>grid<\/code>, <code>inline-grid<\/code>, <code>table<\/code>, <code>table-cell<\/code>, <code>table-row<\/code><\/p>\n\n\n\n<p>See the&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/layout\/css-utilities#element-display\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Utilities documentation<\/a>&nbsp;for more information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-new-flex-classes\">New Flex Classes<\/h3>\n\n\n\n<p>Responsive <strong>flex<\/strong> classes have been added for the following properties: <code>align-content<\/code>, <code>align-items<\/code>, <code>align-self<\/code>, <code>justify-content<\/code>, <code>flex-direction<\/code>, <code>flex-wrap<\/code>, <code>flex<\/code>, <code>flex-grow<\/code>, <code>flex-shrink<\/code>, <code>order<\/code><\/p>\n\n\n\n<p>See the&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/layout\/css-utilities#flex-container-properties\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Utilities documentation<\/a>&nbsp;for more information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-deprecated-classes\">Deprecated Classes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>ion-hide<\/code>-* classes have been deprecated as the new <code>ion-display-*<\/code> classes offer expanded functionality and fully replace the need for them. See the <a href=\"https:\/\/ionicframework.com\/docs\/layout\/css-utilities#element-display\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Utilities documentation<\/a> for more information.<\/li>\n\n\n\n<li>To improve naming consistency and reduce the risk of class name conflicts with future utility classes, <code>ion-nowrap<\/code>, <code>ion-wrap<\/code> and <code>ion-wrap-reverse<\/code> have been deprecated in favor of <code>ion-flex-nowrap<\/code>, <code>ion-flex-wrap<\/code> and <code>ion-flex-wrap-reverse<\/code>. See the <a href=\"https:\/\/ionicframework.com\/docs\/layout\/css-utilities#flex-wrap\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Utilities documentation<\/a> for more information.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example Migration:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;!-- Before --&gt;\n&lt;div class=&quot;ion-hide-sm-down&quot;&gt;Hide on small devices only&lt;\/div&gt;\n&lt;div class=&quot;ion-wrap&quot;&gt;Flex wrap&lt;\/div&gt;\n\n&lt;!-- After --&gt;\n&lt;div class=&quot;ion-display-none ion-display-sm-block&quot;&gt;Hide on small devices only&lt;\/div&gt;\n&lt;div class=&quot;ion-flex-wrap&quot;&gt;Flex wrap&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-file-size-impact\">File Size Impact<\/h3>\n\n\n\n<p>The addition of these utility classes has increased the file sizes of both <code>display.css<\/code> and <code>flex-utils.css<\/code>. While these files are included by default in new Ionic Framework apps, they are optional. If you don&#8217;t need these utility classes, you can remove the imports from your project. The file where these imports are located depends on the framework, as outlined in the table below:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Framework<\/strong><\/td><td><strong>File Location<\/strong><\/td><\/tr><tr><td>Angular<\/td><td><code>src\/global.scss<\/code><\/td><\/tr><tr><td>React<\/td><td><code>src\/App.tsx<\/code><\/td><\/tr><tr><td>Vue<\/td><td><code>src\/main.ts<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>See the&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/layout\/global-stylesheets\" target=\"_blank\" rel=\"noreferrer noopener\">Global Stylesheets documentation<\/a>&nbsp;for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-latest-ionicons\">Latest Ionicons<\/h2>\n\n\n\n<p>Ionicons has been updated to version 8, bringing the latest icon designs and improvements to your Ionic Framework applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-s-new\">What&#8217;s New<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>New icons added to the library<\/li>\n\n\n\n<li>Enhanced Safari SVG rendering compatibility<\/li>\n\n\n\n<li>Better theming with <code>currentColor<\/code> applied to icons<\/li>\n\n\n\n<li>Improved documentation and icon organization<\/li>\n\n\n\n<li>Various performance improvements and bug fixes<\/li>\n<\/ul>\n\n\n\n<p>See the <a href=\"https:\/\/ionic.io\/ionicons\" target=\"_blank\" rel=\"noreferrer noopener\">Ionicons website<\/a> to explore all available icons. For detailed release information, check out the <a href=\"https:\/\/github.com\/ionic-team\/ionicons\/releases\/tag\/v8.0.0\" target=\"_blank\" rel=\"noreferrer noopener\">Ionicons v8 release notes<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-angular-ionmodaltoken-for-modal-injection\">Angular <code>IonModalToken<\/code> for Modal Injection<\/h2>\n\n\n\n<p>We&#8217;ve added an <code>IonModalToken<\/code> to provide easier programmatic access to modal elements and their events in Angular components. This enhancement allows you to directly access Modal internals and connect to Modal events through dependency injection.<\/p>\n\n\n\n<p><strong>Benefits:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Type Safety<\/strong>: Full TypeScript support with proper typing for the modal element<\/li>\n\n\n\n<li><strong>Angular Integration<\/strong>: Works seamlessly with Angular&#8217;s dependency injection system<\/li>\n\n\n\n<li><strong>Simplified Code<\/strong>: Eliminates the need for <code>ViewChild<\/code> queries or manual element references<\/li>\n\n\n\n<li><strong>Better Testing<\/strong>: Easier to mock and test components that use injection tokens<\/li>\n<\/ul>\n\n\n\n<p><strong>Example Usage:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">export class ModalComponent implements OnInit {\n  private modalToken = inject(IonModalToken);\n\n  ngOnInit() {\n    this.modalToken.addEventListener(&#039;ionModalDidDismiss&#039;, (event) =&gt; {\n      console.log(&#039;Modal did dismiss:&#039;, event.detail);\n    });\n  }\n}<\/code><\/pre>\n\n\n\n<p>See the&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/angular\/injection-tokens\" target=\"_blank\" rel=\"noreferrer noopener\">Angular Injection Tokens documentation<\/a>&nbsp;for more information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-community-highlights\">Community Highlights<\/h2>\n\n\n\n<p>Our interns from Madison College and UW Madison&#8217;s Open Source Programming Office have made significant contributions over the past two months! <a href=\"https:\/\/github.com\/soundproofboot\" target=\"_blank\" rel=\"noreferrer noopener\">Colin<\/a>, <a href=\"https:\/\/github.com\/joesphchang\" target=\"_blank\" rel=\"noreferrer noopener\">Joey<\/a> and <a href=\"https:\/\/github.com\/kkindrai\" target=\"_blank\" rel=\"noreferrer noopener\">Kendra<\/a> helped resolve framework bugs and brought several areas of our documentation up to date, making it easier for developers to get started and find accurate information when using Ionic Framework. Their fresh perspectives and enthusiasm were a valuable addition to the project. With their internship now complete, we&#8217;re looking forward to welcoming more interns next summer.<\/p>\n\n\n\n<p>We also want to extend a special thank you to our community contributors. Whether through bug reports, feature requests, or code contributions, your involvement continues to make Ionic Framework more stable and dependable for everyone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-s-next\">What&#8217;s Next<\/h2>\n\n\n\n<p>We&#8217;re continuing to work on several exciting features for future releases:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React Router<\/strong> \u2014 We&#8217;re actively working on comprehensive React Router v6+ support, documenting all necessary changes and updating our internal codebase to ensure seamless compatibility with the latest versions. This will provide developers with improved routing capabilities and better integration with modern React applications.<\/li>\n\n\n\n<li><strong>Modular Ionic Framework<\/strong> \u2014 We&#8217;re exploring a groundbreaking modular architecture that will revolutionize how developers use Ionic Framework. This new approach will allow developers to selectively import only the &#8220;feel&#8221; of Ionic (page transitions, platform styles, etc.) with or without the &#8220;look&#8221; (Material Design, iOS styles). Additionally, it will enable complete customization through custom theme creation and selective import of official themes. While this work is in its early stages, we believe this modular approach will unlock unprecedented flexibility for the Ionic community.<\/li>\n<\/ul>\n\n\n\n<p>We hope you&#8217;ll try out the latest improvements and let us know how they&#8217;re working for you. Your feedback helps shape the future of Ionic Framework. Thank you for being an essential part of the Ionic community! <strong>\ud83d\udc99<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ionic Framework 8.7 is here! This release delivers powerful new features that enhance developer productivity and user experience. From new CSS utility classes that streamline layout development to new Reorder events that provide fine-grained control, plus the latest Ionicons v8 update and Angular modal injection improvements, 8.7 brings the tools you need to create exceptional [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":6502,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"[]"},"categories":[1,120],"tags":[23,3],"class_list":["post-6469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","tag-framework","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Ionic 8.7 - Ionic Blog<\/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:\/\/ionic.io\/blog\/announcing-ionic-8-7\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic 8.7\" \/>\n<meta property=\"og:description\" content=\"Ionic Framework 8.7 is here! This release delivers powerful new features that enhance developer productivity and user experience. From new CSS utility classes that streamline layout development to new Reorder events that provide fine-grained control, plus the latest Ionicons v8 update and Angular modal injection improvements, 8.7 brings the tools you need to create exceptional [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-31T21:22:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T21:22:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brandy Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brandy Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7\"},\"author\":{\"name\":\"Brandy Smith\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\"},\"headline\":\"Announcing Ionic 8.7\",\"datePublished\":\"2025-07-31T21:22:48+00:00\",\"dateModified\":\"2025-07-31T21:22:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7\"},\"wordCount\":977,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png\",\"keywords\":[\"Framework\",\"Ionic\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7\",\"name\":\"Announcing Ionic 8.7 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png\",\"datePublished\":\"2025-07-31T21:22:48+00:00\",\"dateModified\":\"2025-07-31T21:22:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic 8.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\",\"name\":\"Brandy Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"caption\":\"Brandy Smith\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/brandy\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic 8.7 - Ionic Blog","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:\/\/ionic.io\/blog\/announcing-ionic-8-7","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic 8.7","og_description":"Ionic Framework 8.7 is here! This release delivers powerful new features that enhance developer productivity and user experience. From new CSS utility classes that streamline layout development to new Reorder events that provide fine-grained control, plus the latest Ionicons v8 update and Angular modal injection improvements, 8.7 brings the tools you need to create exceptional [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7","og_site_name":"Ionic Blog","article_published_time":"2025-07-31T21:22:48+00:00","article_modified_time":"2025-07-31T21:22:49+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png","type":"image\/png"}],"author":"Brandy Smith","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Brandy Smith","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7"},"author":{"name":"Brandy Smith","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26"},"headline":"Announcing Ionic 8.7","datePublished":"2025-07-31T21:22:48+00:00","dateModified":"2025-07-31T21:22:49+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7"},"wordCount":977,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png","keywords":["Framework","Ionic"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-8-7#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7","url":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7","name":"Announcing Ionic 8.7 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png","datePublished":"2025-07-31T21:22:48+00:00","dateModified":"2025-07-31T21:22:49+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-8-7"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-8-7#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic 8.7"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26","name":"Brandy Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","caption":"Brandy Smith"},"url":"https:\/\/ionic.io\/blog\/author\/brandy"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/07\/8.7.0-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=6469"}],"version-history":[{"count":71,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6469\/revisions"}],"predecessor-version":[{"id":6546,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6469\/revisions\/6546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/6502"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=6469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=6469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=6469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}