📖 ngx-foldable

ngx-foldable is a set of components and services to help you build dual-screen experiences for foldable or dual-screen devices, such as the Surface Duo

See the live demo or read the full documentation.

How to test on your browser

The dual-screen emulation feature requires latest Microsoft Edge or Google Chrome versions (>= 97).

If you have older browser versions, you need to enable experimental flags. Follow the instructions here to setup your browser for dual-screen emulation.

Library usage

Check out the demo source code to see an example usage of the library.

Add the library to your Angular project:

npm install ngx-foldable

Import the library in your app:

import { FoldableModule } from 'ngx-foldable';
...

@NgModule({
  ...
  imports: [
    FoldableModule
    ...
  ],
  ...
})
export class AppModule { }

Use the provided fdSplitLayout, fdWindow and fdIfSpan directives to build your layout:

<!--
  SplitLayout supports: flex, grid or absolute
  Styling is only added when a multi screen mode is detected.
-->
<div fdSplitLayout="grid">

  <!-- Assign to first window segment -->
  <section fdWindow="0">
    This will be displayed on the first window segment of a multi screen or single screen device.
    
    <p *fdIfSpan="'none'; else alt">This is only visible on a single screen device.</p>
    <ng-template #alt><p>This is only visible on a multi screen device.</p></ng-template>
  </section>

  <!-- Assign to second window segment -->
  <section fdWindow="1">
    This will be displayed on the second window segment of a multi screen device.

    <p *fdIfSpan="'multi'">This is only visible on multi screen device, regardless of the orientation.</p>
    <p *fdIfSpan="'dual-vertical'">This is only visible on dual vertical viewports.</p>
    <p *fdIfSpan="'dual-horizontal'">This is only visible on dual horizontal viewports.</p>
  </section>
</div>

Using the ScreenContext service, you can also receive updates when the screen context changes:

import { ScreenContext } from 'ngx-foldable';
...
export class AppComponent {
  constructor(private screenContext: ScreenContext) {
    this.screenContext
      .asObservable()
      .subscribe((context) => {
        console.log('Screen context changed:', context);
      });
  }
}

You can read the full documentation here.

Contributing

You're welcome to contribute to this project! Make sure you have read the code of conduct before posting an issue or a pull request.

Follow these steps to run this project locally:

1. Clone the repository on your machine
2. Run npm install to install packages
3. Run npm start to start the dev server with the demo app

You can then start making modifications on the library or demo app code.

Related work

• Surface Duo Photo Gallery: Angular re-implementation of the Surface Duo Photo Gallery sample using this library
• react-foldable: a similar library built for React
• foldable-devices/demos: web demos for foldables devices.