![\"\ud83d\udc47\"](\"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/1f447.png\")
<\/p>\nHot on the heels of Ionic 7.1 is another great feature release! This release brings updates to Button, Searchbar, and our Angular integration.<\/p>\n
Here\u2019s what\u2019s new <\/p>\n
<\/p>\n
We made some important infrastructure improvements to Button ahead of a change we plan to make in Ionic 8. Buttons with long text currently get cut off, making the text impossible to read. Starting in Ionic 8, long text in Buttons will wrap to the next line instead of getting cut off to improve readability.<\/p>\n
We collaborated with Todd Libby<\/a>, a W3C Invited Expert on Accessibility, to develop a solution for this problem. During development, it was noted that truncating text with ellipsis is not an acceptable solution because the text that is truncated is still not readable even though the button layout may look nicer than it did before. Instead, wrapping the text to the next line fixes the original layout issue while ensuring that the text is readable.<\/p>\n During development we identified some instances where this new behavior may cause unexpected layout changes in developer applications. In particular, buttons inside of list headers may wrap instead of displaying on the same line even if the text was never cut off. As a result, we have decided to enable this behavior in Ionic 8.0, so developers can make any necessary changes at their own pace.<\/p>\n Ionic 7.2 lays the groundwork for this change with some internal fixes to Button. Developers can enable this wrapping behavior now by setting either the Using a Class<\/strong><\/p>\n Using CSS<\/strong><\/p>\n We have also launched a new accessibility guide on the Button documentation that shows how to opt-in to this behavior: https:\/\/ionicframework.com\/docs\/api\/button#accessibility<\/a><\/p>\n Searchbar now has a \u201cname\u201d property to help identify search data when submitting a form.<\/p>\n Thanks to NicoDos<\/a> for contributing this feature!<\/p>\n Angular 16 introduced a new feature that lets developers bind route parameters as component inputs. This means that developers can access the parameter for Ionic 7.2 adds support for this feature to our Router Outlet component. Developers can use this feature by updating their router configuration<\/a>.<\/p>\n Opt-in with NgModules<\/strong><\/p>\n Opt-in with Standalone Components<\/strong><\/p>\n Thanks again to everyone who helped make this latest release possible. We\u2019ll catch you soon for the next one!<\/p>\n The post Announcing Ionic 7.2<\/a> appeared first on Ionic Blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hot on the heels of Ionic 7.1 is another great feature release! This release brings updates to Button, Searchbar, and our Angular integration. Here\u2019s what\u2019s new Button Wrapping We made some important infrastructure improvements to Button ahead of a change we plan to make in Ionic 8. Buttons with long text currently get cut […]<\/p>\n","protected":false},"author":1,"featured_media":7712,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[449,438],"tags":[450,554],"class_list":["post-7629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic-apps","category-technology","tag-building-ionic-apps","tag-ionic-v7-2"],"acf":{"custom_meta_title":"Ionic 7.2: Forging the Future of App Development","meta_description":"Discover limitless possibilities with Ionic 7.2. Shape the future of app creation with cutting-edge technology. Read this Blog to know more!","meta_keyword":"Ionic Bonding, Ionic 7.2 Features, Ionic 7.2 updates","other_meta_tag":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7629"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=7629"}],"version-history":[{"count":3,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7629\/revisions"}],"predecessor-version":[{"id":7715,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/7629\/revisions\/7715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/7712"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=7629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=7629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=7629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Why is this behavior not enabled by default?<\/strong><\/h3>\n
How do I opt-in to this behavior now?<\/strong><\/h3>\n
ion-text-wrap<\/code> class on ion-button<\/code> or white-space: normal<\/code> in their CSS.<\/p>\n<ion-button class=\"ion-text-wrap\">Some text with a really long label<\/ion-button><\/code><\/pre>\nion-button {\r\n\u00a0\u00a0white-space: normal;\r\n}<\/code><\/pre>\nSearchbar Name Property<\/strong><\/h2>\n
<ion-searchbar placeholder=\"Search for an Artist\" name=\"artist-search\"><\/ion-searchbar><\/code><\/pre>\nAngular Route Parameter Binding<\/strong><\/h2>\n
\/my-route\/:id<\/code> by using the @Input<\/code> decorator in the associated component.<\/p>\nRouterModule.forRoot(routes, {\r\n\u00a0\u00a0\/\/... other features\r\n\u00a0\u00a0bindToComponentInputs: true\r\n});<\/code><\/pre>\nprovideRouter(appRoutes, withComponentInputBinding());<\/code><\/pre>\n