https://github.com/sinedied/ngx-foldable
Angular library to help your build dual-screen experiences for foldable or dual-screen devices
https://github.com/sinedied/ngx-foldable
angular components duo experience foldable hacktoberfest library multiscreen surface
Last synced: about 2 months ago
JSON representation
Angular library to help your build dual-screen experiences for foldable or dual-screen devices
- Host: GitHub
- URL: https://github.com/sinedied/ngx-foldable
- Owner: sinedied
- License: mit
- Created: 2020-09-10T14:09:54.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-04-07T07:34:46.000Z (over 2 years ago)
- Last Synced: 2025-08-20T07:42:47.980Z (about 2 months ago)
- Topics: angular, components, duo, experience, foldable, hacktoberfest, library, multiscreen, surface
- Language: TypeScript
- Homepage: https://sinedied.github.io/ngx-foldable/
- Size: 4.4 MB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 📖 ngx-foldable
[](https://www.npmjs.com/package/ngx-foldable)


[](https://github.com/sinedied/ngx-foldable/actions)
[](LICENSE)> 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](https://docs.microsoft.com/dual-screen/web/?WT.mc_id=javascript-9776-yolasors)
![]()
See the [live demo](https://sinedied.github.io/ngx-foldable/demo/) or read the [full documentation](https://sinedied.github.io/ngx-foldable/).
## 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](https://devblogs.microsoft.com/surface-duo/build-and-test-dual-screen-web-apps/?WT.mc_id=javascript-9776-yolasors#build-and-test-on-the-desktop) to setup your browser for dual-screen emulation.## Library usage
Check out the [demo](./projects/demo/src/app) 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
This will be displayed on the first window segment of a multi screen or single screen device.
This is only visible on a single screen device.
This is only visible on a multi screen device.
This will be displayed on the second window segment of 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.
```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](https://sinedied.github.io/ngx-foldable/).
## Contributing
You're welcome to contribute to this project!
Make sure you have read the [code of conduct](./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 appYou can then start making modifications on the library or demo app code.
## Related work
- [Surface Duo Photo Gallery](https://github.com/sinedied/surface-duo-photo-gallery): Angular re-implementation of the [Surface Duo Photo Gallery sample](https://github.com/foldable-devices/demos/tree/master/photo-gallery) using this library
- [react-foldable](https://github.com/aaronpowell/react-foldable): a similar library built for React
- [foldable-devices/demos](https://github.com/foldable-devices/demos): web demos for foldables devices.