📖 ngx-foldable

!Node version
!Angular version

> 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:

``sh
npm install ngx-foldable
`

Import the library in your app:

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

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

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

`html




`

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

`typescript
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.