Angular library to help you build dual-screen experiences for foldable or dual-screen devices
npm install 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.
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.
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:
` This is only visible on a single screen device. This is only visible on a multi screen device. This is only visible on multi screen device, regardless of the orientation. This is only visible on dual vertical viewports. This is only visible on dual horizontal viewports.html`
This will be displayed on the first window segment of a multi screen or single screen device.
This will be displayed on the second window segment of a multi screen device.
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.
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 packagesnpm start` to start the dev server with the demo app
3. Run
You can then start making modifications on the library or demo app code.
- 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.