Our great sponsors
-
-
ngx-foldable
Angular library to help your build dual-screen experiences for foldable or dual-screen devices
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
surface-duo-photo-gallery
This repo is an Angular re-implementation of the Surface Duo Photo Gallery sample
-
-
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
In this post we'll take a look at how you can use Angular to create a foldable web experience, with minimal changes to an existing code base. We'll start from the photo gallery demo, create an Angular version of it and then see how using an Angular library makes the foldable adaptation way easier to approach.
Adapting existing apps to foldable devices does not mean that you have to rethink your design and code entirely. With ngx-foldable library you can adapt existing Angular apps to support dual-screen devices with minimal changes to your app (and no CSS!). react-foldable is also an alternative if you're working with React, and I'm sure that similar libraries will eventually become available for other frameworks.
Adapting existing apps to foldable devices does not mean that you have to rethink your design and code entirely. With ngx-foldable library you can adapt existing Angular apps to support dual-screen devices with minimal changes to your app (and no CSS!). react-foldable is also an alternative if you're working with React, and I'm sure that similar libraries will eventually become available for other frameworks.
You can find the complete application source code on GitHub, but let's have a closer look at the most interesting parts here.
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 behind it, sometimes we just want a more straightforward way of achieving our intent. That's also why CSS libraries like Bootstrap and Tailwind CSS are so popular for quickly creating Responsive Designs.
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 behind it, sometimes we just want a more straightforward way of achieving our intent. That's also why CSS libraries like Bootstrap and Tailwind CSS are so popular for quickly creating Responsive Designs.
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 behind it, sometimes we just want a more straightforward way of achieving our intent. That's also why CSS libraries like Bootstrap and Tailwind CSS are so popular for quickly creating Responsive Designs.
I wanted to keep the demo app as simple as possible to understand, so I used the Angular CLI to generate the project using the minimal template:
In this post we'll take a look at how you can use Angular to create a foldable web experience, with minimal changes to an existing code base. We'll start from the photo gallery demo, create an Angular version of it and then see how using an Angular library makes the foldable adaptation way easier to approach.