{"id":1283,"date":"2016-08-31T13:28:48","date_gmt":"2016-08-31T13:28:48","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1283"},"modified":"2016-11-04T15:09:13","modified_gmt":"2016-11-04T15:09:13","slug":"layout-the-cool-way-using-the-ionic-2-grid-component","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component","title":{"rendered":"Layout the Cool Way: Using the Ionic 2 Grid Component"},"content":{"rendered":"

One of the first things a lot of developers love about Ionic is that it makes the tedious task of building basic app components that Just Look Good much easier. But did you know Ionic also has a grid component that makes layout easy? This is awesome because, well, CSS is a pain, and why deal with it if you don’t have to?<\/p>\n

Take the photo gallery example app we built in a previous blog post<\/a>. This app uses Ionic Native’s Image Picker plugin<\/a>, which allows the user to select multiple photos from their native photo app, then displays the selected photos in a nice gallery layout, like this:<\/p>\n

\"gallery

Sure, this is just a relatively simple two-column layout, but even if you’re a seasoned CSS master, you’d probably rather not deal with writing the styles for from scratch. And why would you? As developers, we excel at taking shortcuts<\/s> implementing great tooling to help speed up our jobs, and in this case the good news is that Ionic 2, sprinkled with a little Angular 2, makes this a pretty simple, declarative process.
\n<\/p>\n

Getting Set Up<\/h3>\n

Want to follow along? Start by doing the following:<\/p>\n

    \n
  1. Download the starter project<\/a> from GitHub.<\/li>\n
  2. Run npm install<\/code> in the project directory.<\/li>\n
  3. Run ionic plugin add cordova-plugin-image-picker<\/code> in the project directory to install the Ionic Native Image Picker plugin.<\/li>\n<\/ol>\n

    Since this example uses the photo picker app from a previous post, you’ll also need to run the app on a device with the usual ionic run ios<\/code>, ionic run android<\/code>, Ionic View<\/a>, or Ionic Package<\/a>.<\/p>\n

    Now, we can get straight to it. The only additional thing we’re going to implement in this app is the grid component, so we don’t need to import any additional dependencies into our project.<\/p>\n

    Building the Grid<\/h3>\n

    To start, we drop the following into <ion-content><\/code> in our app\/pages\/gallery\/gallery.html<\/code> template file:<\/p>\n

    <ion-grid>\n  <ion-row *ngFor="let row of grid">\n  <\/ion-row>\n<\/ion-grid>\n<\/code><\/pre>\n
    Similar to the popular Bootstrap UI framework for web development, Ionic’s grid component handles the layout of our app view as a set of columns and rows. In this case, <ion-grid><\/code> is an Ionic 2 component available out of the box that places the container for a grid layout in the DOM. Inside the grid, we have a series of rows declared with the <ion-row><\/code> component.<\/p>\n
    For this view, we want multiple rows, so we use Angular 2’s structural *ngFor<\/code> directive, which will insert an <ion-row><\/code> for each value in an iterable we provide. In this case, the iterable is a grid<\/code> array:<\/p>\n
    <ion-row *ngFor="let row of grid"><\/code><\/p>\n
    To make this work, we need to define the array in app\/pages\/gallery\/gallery.ts<\/code>. In this file, you’ll see that I’ve already included the code needed to get the array of file URIs that are passed in from the previous view by using Ionic’s NavParams.get()<\/code>:<\/p>\n
    images: Array<string>;  \n\nconstructor(public navCtrl: NavController, public navParams: NavParams) {\n  this.images = this.navParams.get('images'); \/\/get file URIs\n}\n<\/code><\/pre>\n
    Conceptually, what we want to do next is declare an array where each index represents a row that contains a nested array of the file URIs for the images we want to display in that row. That sounds a little confusing, so think of it this way: We’re just modeling our array to look the way we want the final grid to look–the outer array models the grid, while the inner array models rows in the grid. The grid array will look like this:<\/p>\n
    [[file_uri, file_uri], [file_uri, file_uri], [file_uri, file_uri], ...]<\/code><\/p>\n
    To do this, we start by declaring a grid<\/code> array in gallery.ts<\/code> above the class constructor. Notice how our TypeScript declaration is declaring an array (our grid) that contains nested arrays of strings (our rows):<\/p>\n
    images: Array<string>;  \ngrid: Array<Array<string>>; \/\/array of arrays\n<\/code><\/pre>\n
    Next, in our constructor, we define the size of the array to be equal to the number of rows we want in our grid. Since the user can choose an arbitrary number of images, we need to do some simple math to get the number of rows we need:<\/p>\n
    constructor(public navCtrl: NavController, public navParams: NavParams) {\n  this.images = this.navParams.get('images');\n  this.grid = Array(Math.ceil(this.images.length\/2)); \/\/MATHS!\n}\n<\/code><\/pre>\n
    We want two images per row in our grid, so all we’ve done is divide the number of file URIs in this.images<\/code> by 2, then used JavaScript’s Math.ceil()<\/code> operator to make sure we round up in the event that the number of photos isn’t even. So, for example, if the user selects seven photos, we create four rows.<\/p>\n
    Then, we just need to insert two images per row. We’ll do this as soon as the GalleryPage<\/code> component is ready to load, by running our logic in IonViewLoaded()<\/code>. For those not familiar with lifecycle events in Ionic 2<\/a>, ionViewLoaded()<\/code> is called when the component, in this case the Home<\/code> page, first loads. We call our logic here, so that it runs before the view appears.<\/p>\n
    ionViewLoaded() {\n\n  let rowNum = 0; \/\/counter to iterate over the rows in the grid\n\n  for (let i = 0; i < this.images.length; i+=2) { \/\/iterate images\n\n    this.grid[rowNum] = Array(2); \/\/declare two elements per row\n\n    if (this.images[i]) { \/\/check file URI exists\n      this.grid[rowNum][0] = this.images[i] \/\/insert image\n    }\n\n    if (this.images[i+1]) { \/\/repeat for the second image\n      this.grid[rowNum][1] = this.images[i+1]\n    }\n\n    rowNum++; \/\/go on to the next row\n  }\n\n}\n<\/code><\/pre>\n
    We now have an array that models our grid, so all we have to do is add columns to the rows in our template. For this, we again use *ngFor<\/code>, this time to add an <ion-col><\/code> for each of the photos in each row. Here, the *ngFor<\/code> in our <ion-row><\/code> iterates over each row in the grid<\/code> array; then, the *ngFor<\/code> in each <ion-col><\/code> iterates over the file URI strings in that row and sets each as the src<\/code> attribute for an <img><\/code> tag. We’ll also use the built-in width-50<\/code> attribute of <ion-col><\/code>. This tells Ionic to automatically size the column to be 50% the width of the grid, taking into account gutter width (the fancy spacing between columns):<\/p>\n
    <ion-grid>\n  <ion-row *ngFor="let row of grid">\n    <ion-col width-50 *ngFor="let file_uri of row">\n      <img [src]="file_uri">\n    <\/ion-col>\n  <\/ion-row>\n<\/ion-grid>\n<\/code><\/pre>\n
    And there we go. A beautiful grid that will render as expected across iOS, Android, and Windows Phone, without a drop of CSS.<\/p>\n
    Is That All it Does?<\/h3>\n
    Not by a long shot, friend!<\/p>\n
    OK, declaratively building a two-column, symmetrical grid layout for an image gallery is neat and all, but it’s pretty basic, all things considered. Not to worry! The grid, row and column components in Ionic 2 support a variety of attributes to help you build complex layouts that render consistently across platforms and devices, including specialized attributes for declaring offsets, widths, vertical alignment, and text wrapping.<\/p>\n
    For example, here’s our same gallery made inmo a simple profile page:<\/p>\n
    \"profile
    And just to show you how much is actually going on in this layout, here’s a view of the grid and grid attributes that actually handles the layout, with rows in red and columns in green:<\/p>\n
    \"grid
    That’s potentially a lot of CSS we would have had to write, and we get to handle it all declaratively, using grid attributes. That’s pretty swank, if you ask me.<\/p>\n
    You might have noticed in this layout that the gallery is a single row. What gives? Just for the sake of example, I assigned the wrap<\/code> attribute to the <ion-row><\/code> element, which causes all of the columns it contains to wrap. This completely removes the need for all that array building we did before, and simplifies our template for the image gallery to this:<\/p>\n
    <ion-row wrap>\n  <ion-col width-33 *ngFor="let file_uri of images">\n  <img [src]="file_uri">\n  <\/ion-col>\n<\/ion-row>\n<\/code><\/pre>\n
    So, why didn’t we take the easy route when we built the two-column gallery? We could have, but that wouldn’t have been nearly as much fun as working with nested arrays!<\/p>\n
    All kidding aside, the point is that there are almost always multiple ways to accomplish the same result, especially when it comes to building the layout of your app. Despite being simple to use, Ionic’s grid component provides a lot of flexibility, so give it a shot. If you’ve never worked with a grid layout before, you might be surprised at just how much of a headache it can save you in the long run.<\/p>\n
    For more information on the grid component, check out the Ionic 2 Grid docs<\/a>, and in case you want to see the finished Image Picker sample app in all its gridded glory, you can download or fork it on GitHub<\/a>. The starter for this project is available in the ‘grid-starter’ branch<\/a>, and the profile view is available in the ‘grid-profile’ branch<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    One of the first things a lot of developers love about Ionic is that it makes the tedious task of building basic app components that Just Look Good much easier. But did you know Ionic also has a grid component that makes layout easy? This is awesome because, well, CSS is a pain, and why […]<\/p>\n","protected":false},"author":40,"featured_media":1288,"comment_status":"open","ping_status":"closed","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],"tags":[23,13,25],"class_list":["post-1283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-framework","tag-ionic-2","tag-tutorials"],"acf":[],"yoast_head":"\nLayout the Cool Way: Using the Ionic 2 Grid Component - 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\/layout-the-cool-way-using-the-ionic-2-grid-component\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layout the Cool Way: Using the Ionic 2 Grid Component\" \/>\n<meta property=\"og:description\" content=\"One of the first things a lot of developers love about Ionic is that it makes the tedious task of building basic app components that Just Look Good much easier. But did you know Ionic also has a grid component that makes layout easy? This is awesome because, well, CSS is a pain, and why […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-31T13:28:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-04T15:09:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"445\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alex Muramoto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alexmuramoto\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Muramoto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component\"},\"author\":{\"name\":\"Alex Muramoto\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5087ed0d4175ef63cbc3aca6c41bcc7\"},\"headline\":\"Layout the Cool Way: Using the Ionic 2 Grid Component\",\"datePublished\":\"2016-08-31T13:28:48+00:00\",\"dateModified\":\"2016-11-04T15:09:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component\"},\"wordCount\":1260,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg\",\"keywords\":[\"Framework\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component\",\"url\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component\",\"name\":\"Layout the Cool Way: Using the Ionic 2 Grid Component - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg\",\"datePublished\":\"2016-08-31T13:28:48+00:00\",\"dateModified\":\"2016-11-04T15:09:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg\",\"width\":250,\"height\":445},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout the Cool Way: Using the Ionic 2 Grid Component\"}]},{\"@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\/c5087ed0d4175ef63cbc3aca6c41bcc7\",\"name\":\"Alex Muramoto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg\",\"caption\":\"Alex Muramoto\"},\"sameAs\":[\"https:\/\/x.com\/alexmuramoto\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/alex\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Layout the Cool Way: Using the Ionic 2 Grid Component - 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\/layout-the-cool-way-using-the-ionic-2-grid-component","og_locale":"en_US","og_type":"article","og_title":"Layout the Cool Way: Using the Ionic 2 Grid Component","og_description":"One of the first things a lot of developers love about Ionic is that it makes the tedious task of building basic app components that Just Look Good much easier. But did you know Ionic also has a grid component that makes layout easy? This is awesome because, well, CSS is a pain, and why […]","og_url":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component","og_site_name":"Ionic Blog","article_published_time":"2016-08-31T13:28:48+00:00","article_modified_time":"2016-11-04T15:09:13+00:00","og_image":[{"width":250,"height":445,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg","type":"image\/jpeg"}],"author":"Alex Muramoto","twitter_card":"summary_large_image","twitter_creator":"@alexmuramoto","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Alex Muramoto","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component"},"author":{"name":"Alex Muramoto","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5087ed0d4175ef63cbc3aca6c41bcc7"},"headline":"Layout the Cool Way: Using the Ionic 2 Grid Component","datePublished":"2016-08-31T13:28:48+00:00","dateModified":"2016-11-04T15:09:13+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component"},"wordCount":1260,"commentCount":11,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg","keywords":["Framework","Ionic 2","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component","url":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component","name":"Layout the Cool Way: Using the Ionic 2 Grid Component - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg","datePublished":"2016-08-31T13:28:48+00:00","dateModified":"2016-11-04T15:09:13+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg","width":250,"height":445},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/layout-the-cool-way-using-the-ionic-2-grid-component#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Layout the Cool Way: Using the Ionic 2 Grid Component"}]},{"@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\/c5087ed0d4175ef63cbc3aca6c41bcc7","name":"Alex Muramoto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/alex-lg-150x150.jpg","caption":"Alex Muramoto"},"sameAs":["https:\/\/x.com\/alexmuramoto"],"url":"https:\/\/ionic.io\/blog\/author\/alex"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/gridprofile.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1283","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\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1283\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1288"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}