\n Earlier this year, Aaron posted how to build a dual-screen web app using React<\/a>, so today I\u2019m going to show how to build for dual-screen devices using Angular.\n<\/p>\n \n In this post, we’ll take a look at how you can use Angular<\/a> to create a foldable web experience, with minimal changes to an existing code base. We’ll start from the photo gallery demo<\/a>, create an Angular version of it, and then see how using an Angular library makes the foldable adaptation much easier to approach.\n<\/p>\n \n \n Adapting existing apps to foldable devices does not mean that you have to rethink your design and code entirely. With the ngx-foldable<\/a> library you can adapt existing Angular apps to support dual-screen devices with minimal changes to your app (and no CSS!). react-foldable<\/a> is also an alternative if you’re working with React, and I’m sure that similar libraries will eventually become available for other frameworks.\n<\/p>\n \n I wanted to keep the demo app as simple as possible to understand, so I used the Angular CLI<\/a> to generate the project using the minimal template:\n<\/p>\n \n It gives us a nice working base with strict type checking<\/a> and single file components, which looked perfect for building this demo. I won’t cover here all the details about what I did to recreate the demo, as I mostly took the existing JavaScript and CSS code from the original photo gallery app and put it in Angular components.\n<\/p>\n \n You can find the complete application source code on GitHub<\/a>, but let’s have a closer look at the most interesting parts here.\n<\/p>\n \n The file \n From there you can see that our app is made of four main components:\n<\/p>\n \n The App<\/strong> component also includes some styling to lay out these components depending on the device configuration:\n<\/p>\n \n Here we’re using specific media queries to adapt the layout on a dual-screen configuration. You’ll see these media queries also used in the other components to hide or show them and adapt their design for every configuration, so let’s have a closer look.\n<\/p>\n \n These three components are used to display different things depending what device it’s running on. The Fullscreen<\/strong> component is used only on single-screen devices, whereas the Fold<\/strong> and Details<\/strong> components are used on dual-screen devices.\n<\/p>\n \n You can see here that by default the Fold<\/strong> component is hidden (height and width set to 0), and it’s made visible with different sizes when a dual-screen device is used. The Details<\/strong> component uses a similar approach. The Fullview<\/strong> component does the opposite by hiding itself when a dual-screen device is detected, with this media query:\n<\/p>\n \n With that, we’ve covered the main principles behind the original photo gallery adaptation. You can see the full source code for this version here<\/a>.\n<\/p>\n \n But we’ve not really made good usage of Angular features here, as we are including all components whether they’re needed or not, and use CSS to show or hide them. We also had to use extra CSS with specific media queries, meaning more work was needed to make this demo. It might not be an issue here as our demo remains quite simple, but in more complex applications, this could result in reduced performance due to unnecessary component rendering, and maintenance issues due to the scattered CSS approach.\n<\/p>\n<\/p>\n \n The Angular library ngx-foldable<\/a> was specifically designed to allow adapting Angular applications while making minimal changes to your code. It provides directives and services to access the screen context information and react to changes automatically.\n<\/p>\n \n We install it with \n With the library set up, we can now use the provided \n First, you will notice that we added a top \n \n Next you will notice that we added the \n The best part of the \n Notice that we also got rid of the Fold<\/strong> component, as it’s no longer needed.\n<\/p>\n \n Finally, we used the \n \n Other possible conditions are \n Using these three directives, we can now remove ALL the specific CSS related to single\/dual screen adaptation. Yup, you read that right. With that, the new CSS for our App component simply becomes:\n<\/p>\n \n Less code in the end, better performance, and no need for specific CSS; sounds like a win here? \ud83d\ude42\n<\/p>\n \n You can see and test the final web app online<\/a>.\n<\/p>\n \n \n We’ve seen how we can abstract the handling of device adaptation and provide a higher-level API using Angular. While it’s always interesting to have a look at the CSS primitives<\/a> behind it, sometimes we just want a more straightforward way of achieving our intent. That’s also why CSS libraries like Bootstrap<\/a> and Tailwind CSS<\/a> are so popular for quickly creating responsive designs.\n<\/p>\n \n You can take a look at the app final code<\/a> and the details of the changes<\/a> when using the ngx-foldable library.\n<\/p>\n \n If you’re curious, you can also dive into the code behind ngx-foldable<\/a> and see how it works. Contributions are welcomed too \ud83d\ude09.\n<\/p>\n \n Check out the Surface Duo web developer documentation<\/a> for more details on the CSS and JavaScript APIs for enhancing your web apps for the Surface Duo and other dual-screen devices.\n<\/p>\n \n If you have any questions, or would like to tell us about your apps, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello web developers! Foldable and dual-screen devices are becoming increasingly more common over time, but you may wonder if investing development time to support these devices might be worth it, especially when creating fully responsive web apps is already a challenge. Using the new CSS and JavaScript primitives is a fun way to discover and […]<\/p>\n","protected":false},"author":56297,"featured_media":1450,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[715,531,412,530],"class_list":["post-1438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-angular","tag-css","tag-javascript","tag-web"],"acf":[],"blog_post_summary":" Hello web developers! Foldable and dual-screen devices are becoming increasingly more common over time, but you may wonder if investing development time to support these devices might be worth it, especially when creating fully responsive web apps is already a challenge. Using the new CSS and JavaScript primitives is a fun way to discover and […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/56297"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1438"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1438\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1450"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Animation](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/word-image.gif\")
TL;DR key takeaway<\/h2>\n
Re-creating the Photo Gallery demo with Angular<\/h2>\n
ng new photo-gallery --minimal --prefix=pg --style=css --routing=false --strict<\/pre>\n
App component<\/h3>\n
app.component.ts<\/code> is the root component of our application. It contains the state, as which image is currently selected, and all the components composing our app. By looking at its template you can glimpse at how our application works:\n<\/p>\n<\/p>\n<pg-gallery [images]=\"images\" (select)=\"setImage($event)\"><\/pg-gallery>\r\n<pg-fold><\/pg-fold>\r\n<pg-details [image]=\"currentImage\"><\/pg-details>\r\n<pg-fullview\r\n [image]=\"currentImage\"\r\n (close)=\"closeImage()\"\r\n (previous)=\"previousImage($event)\"\r\n (next)=\"nextImage($event)\"\r\n><\/pg-fullview><\/pre>\n
\n
:host {\r\n width: 100vw;\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: row;\r\n}\r\n@media (screen-spanning: single-fold-vertical) {\r\n :host { flex-direction: row; }\r\n}\r\n@media (screen-spanning: single-fold-horizontal) {\r\n :host { flex-direction: column-reverse; }\r\n}\r\n@media (screen-spanning: none) {\r\n :host { flex-direction: row; }\r\n}<\/pre>\nFold, Details and Fullview components<\/h3>\n
import { Component } from '@angular\/core';\r\n \r\n@Component({\r\n selector: 'pg-fold',\r\n template: `@media (screen-spanning: single-fold-horizontal),\r\n (screen-spanning: single-fold-vertical) {\r\n .container {\r\n display: none;\r\n }\r\n}<\/pre>\nIntroducing ngx-foldable<\/h2>\n
npm install ngx-foldable<\/code> and then import the FoldableModule<\/code> into our app:\n<\/p>\nimport { FoldableModule } from 'ngx-foldable';\r\n \r\n@NgModule({\r\n imports: [\r\n FoldableModule\r\n ...\r\n ],\r\n ...\r\n})\r\nexport class AppModule {}<\/pre>\nRevisiting the App component<\/h2>\n
fdSplitLayout<\/code>, fdWindow<\/code> and fdIfSpan<\/code> directives to rebuild our App component template:\n<\/p>\n<div fdSplitLayout=\"flex reverse\">\r\n <pg-gallery fdWindow=\"0\" [images]=\"images\" (select)=\"setImage($event)\"><\/pg-gallery>\r\n <pg-details fdWindow=\"1\" *fdIfSpan=\"'multi'\" [image]=\"currentImage\"><\/pg-details>\r\n <pg-fullview\r\n *fdIfSpan=\"'none'\"\r\n [image]=\"currentImage\"\r\n (close)=\"closeImage()\"\r\n (previous)=\"previousImage($event)\"\r\n (next)=\"nextImage($event)\"\r\n ><\/pg-fullview>\r\n<\/div><\/pre>\n
<div><\/code> container with the directive fdSplitLayout<\/code>. This directive enables us to build a split layout on dual-screen devices without the need for extra CSS. The first parameter allows you to choose which kind of CSS layout you want to use, so we’re using flex<\/code> here. Other possible options are grid<\/code> or absolute<\/code>, to better fit your existing app layout. The second parameter allow you to choose whether you want to reverse<\/code> the window segments order when the spanning (ie the orientation) changes, or keep the normal<\/code> order.\n<\/p>\n![\"Three](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/word-image.png\")
fdWindow<\/code> directive to the Gallery<\/strong> and Details<\/strong> components. This one allows you to assign a particular component to a window segment in dual-screen mode and works only within a fdSplitLayout<\/code> container element.\n<\/p>\nfdSplitLayout<\/code> and fdWindow<\/code> directives are that they’re only activated on dual-screen devices, so absolutely no CSS is added when the app is running on a single-screen device.\n<\/p>\nfdIfSpan<\/code> structural directive to show\/hide the Details<\/strong> and Fullview<\/strong> components depending on the context. This directive works the same as ngIf<\/a><\/code>, except that it’s wired to pre-defined conditions related to the current screen context.\n<\/p>\n*fdIfSpan=\"'multi'\"<\/code> means that the Details<\/strong> component will only be attached to the DOM in a multi-screen context, no matter what the orientation of the device is. The Fullview<\/strong> component uses the opposite value of 'none'<\/code>, meaning that it will be present only on single-screen devices. Note that we could have also used the else<\/a><\/code> syntax, exactly like a regular ngIf<\/code>.\n<\/p>\n'fold-vertical'<\/code> and 'fold-horizontal'<\/code> if you need to target a specific orientation.\n<\/p>\n:host {\r\n width: 100vw;\r\n height: 100vh;\r\n}<\/pre>\n![\"Screenshot](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/graphical-user-interface-application-description.png\")
Going further<\/h2>\n
Resources and feedback<\/h2>\n