Desktop UI

Getting started

The library @deepkit/desktop-ui is an Angular component library with many useful components to create web applications. It is based on standalone components and signals, and thus perfect for a zoneless Angular application.

It is available in NPM. Install it with its dependencies in an already existing angular project.

npm install @deepkit/desktop-ui @angular/cdk

Start using the library

Open now your app.component.html and create your first desktop app.

<!-- This loads global styles. Only needed once in your application. -->
<dui-style />

<!-- 'normalize-style' sets useful defaults like font, h1, h2, anchor, p, etc. Remove if you want to have your own styles. -->
<dui-window normalize-style> 
    <dui-window-header>
        Angular Desktop UI
        <dui-window-toolbar>
            <dui-button-group>
                <dui-button textured icon="envelop"></dui-button>
            </dui-button-group>
            <dui-button-group float="right">
                <dui-input textured icon="search" placeholder="Search" round clearer></dui-input>
            </dui-button-group>
        </dui-window-toolbar>
    </dui-window-header>
    <dui-window-content>
        <div>
            This is the window content
        </div>
    </dui-window-content>
</dui-window>

This is the window content

Please note that you need at least one and max one dui-window element in your hierarchy. You usually put a router-outlet inside the dui-window-content element, so that you can navigate to different pages of your application.

<dui-window-content>
    <router-outlet/>
</dui-window-content>

Multiple windows are currently not supported except if you use a new Electron Window instance (and thus bootstrap the whole Angular application again). This is currently a limitation with Angular itself not supporting multiple HTML documents.

If you start from a blank Angular application, you should reset html/body paddings:

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}