Windows

<ftui-window-list></ftui-window-list> must be added once to the root component’s template (usually app.component.html).

Window layout skeletons

Use this as a basis to develop a layout for a window and contains only basic styling. See Let the Grid play nice within a Window for a basic HTML structure of the window.

demo.component.html

<div class="card-body overflow-auto">
    <!--    window content-->
</div>
<div class="card-footer">
    <div class="d-flex justify-content-between">
        <div>
            <!--        left-sided elements-->
        </div>
        <div>
            <!--        right-sided elements-->
        </div>
    </div>
</div>

Let the Grid play nice within a Window

windowDemo.component.html

<div class="d-flex flex-column h-100 overflow-auto">
    <div class="d-flex px-3 py-1 justify-content-end">
        <ftui-grid-toolbar [instance]="userGrid"></ftui-grid-toolbar>
    </div>

    <div class="h-100 overflow-auto">
        <ftui-grid
            [source]="UserList|async"
            #userGrid id="demo-grid-window"
            [columns]="columns">
        </ftui-grid>
        <ftui-loader [show]="indexPending$|async"></ftui-loader>
    </div>

    <div class="card-footer d-flex justify-content-between">
        <button ftui-button>Button</button>
        <button ftui-button>Another button</button>
    </div>
</div>

Opening/closing a window from a Template

demo.component.html

<ng-template #windowContent>
    <div class="card-body overflow-auto">
        <!--    window content-->
    </div>
    <div class="card-footer">
        <div class="d-flex justify-content-between">
            <div>
                <!--        left-sided elements-->
            </div>
            <div>
                <!--        right-sided elements-->
            </div>
        </div>
    </div>
</ng-template>

demo.component.ts

@ViewChild('windowContent') windowContent!: TemplateRef<unknown>;

private ref?: WindowRef;

constructor(private windowService: WindowService) { }

protected openWindow() {
    this.ref = this.windowService.openTemplate(
        this.windowContent,
        {width: 1000, height: 700, title: 'app.window.title'}
    );
}

protected closeWindow() {
    this.ref?.close();
}

Opening/closing a window from a Component

demo.component.ts

private ref?: WindowRef;
constructor(private windowService: WindowService) { }

protected openWindow() {
    this.ref = this.windowService.openComponent(
        AnotherComponent,
        {width: 1000, height: 700, title: 'app.window.title'}
    );
}

protected closeWindow() {
    // close from within calling component
    this.ref?.close();
}

See Window layout skeletons for a basic HTML structure of the window.

another.component.ts

constructor(private ref: WindowRef) { }

protected closeWindow() {
    // close from within the windowed component by injecting the WindowRef
    this.ref.close();
}

Passing data from a Window

demo.component.ts

// ...
protected openWindow() {
    this.ref = this.windowService.openComponent(AnotherComponent);
    this.ref?.close$.subscribe(data => {
        console.log(`Window said ${data}`);
    });
}

another.component.ts

// ...
protected closeWindow() {
    this.ref.close(data);
}