Troubles with Content Density

[Tomashow]

Hello, fundamental-ngx Team.

Our team is currently developing the application with "@fundamental-ngx/core": "0.47.0" and "@angular/core": "^16.2.0".

We have been tasked with implementing various Content Density settings (refer to https://sap.github.io/fundamental-ngx/#/core/content-density). However, the implementation process encountered several issues.

1.Problem with GlobalContentDensityService

Based on the example, I observed the need to import the ContentDensityModule into the array of the app.module, and I have successfully completed this step. I am now using the corresponding code from example in my app.component.

export class AppComponent {
  constructor(readonly _contentDensityService: GlobalContentDensityService) {}

  onChange($event: any): void {
    this._contentDensityService.updateContentDensity($event);
  }
}

I am currently experiencing the following issue:

then when I provide GlobalContentDensityService in App module I have next issue

and after that unclear how to provide ContentDensityStorage

Maybe I miss something but can't use it how it done in example https://sap.github.io/fundamental-ngx/#/core/content-density

import { AsyncPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { GlobalContentDensityService } from '@fundamental-ngx/core/content-density';
import { SelectModule } from '@fundamental-ngx/core/select';
import { ContentDensityUserComponent } from './content-density-user/content-density-user.component';

@Component({
    selector: 'fd-content-density-example',
    templateUrl: './content-density-example.component.html',
    standalone: true,
    imports: [SelectModule, FormsModule, ContentDensityUserComponent, AsyncPipe]
})
export class ContentDensityExampleComponent {
    constructor(readonly _contentDensityService: GlobalContentDensityService) {}

    onChange($event: any): void {
        this._contentDensityService.updateContentDensity($event);
    }
}

Also when we go to stackblitz from examples https://sap.github.io/fundamental-ngx/#/core/content-density ,it broken .

2.Not all components switch in to compact mode using contentDensityObserverProviders****

Using this in providers in app.component

providers: [
        contentDensityObserverProviders({
            supportedContentDensity: [
                ContentDensityMode.COMPACT,
                ContentDensityMode.COZY,
                ContentDensityMode.CONDENSED,
            ],
            defaultContentDensity: ContentDensityMode.COMPACT,
        }),
    ],

structure of project next : router-outlet in app.component and next structure in route when occurred issue with dropdowns(nested) elements

<fd-dynamic-page class="home-page">
    <fd-dynamic-page-header [title]="userFirstName$ | async | heyUser">
        <fd-dynamic-page-global-actions>
            <fd-toolbar
                fdType="transparent"
                [clearBorder]="true"
            >
                <fcw-old-flex-connect-button fd-toolbar-item />
            </fd-toolbar>
        </fd-dynamic-page-global-actions>
    </fd-dynamic-page-header>
    <fd-tab-list
        [defaultTab]="findHomeNavigationTabIdFromCurrentUrl()"
        (selectedTabChange)="onSelectedHomeNavigationTabChanged($event)"
    >
        <fd-tab
            *ngFor="let homeNavigationRoute of homeNavigationRoutes; index as tabIndex"
            [id]="getHomeNavigationTabIdFromIndex(tabIndex)"
            [title]="getHomeNavigationTabTitle(homeNavigationRoute)"
        />
        <fd-dynamic-page-content
            class="home-page__content"
            fd-scrollbar
        >
            <router-outlet />
        </fd-dynamic-page-content>
    </fd-tab-list>
</fd-dynamic-page>

In Date picker, combo boxes, select (inside router-outlet in fd-tab-list) when we open it we see that child components have cozy mode (attached screenshots), but parent component have compact mode.

And also (inside this component just fd-button) inside toolbar did't switch to compact mode

If we using ContentDensityDirective on dynamic page all nested element also have compact mode and also is in compact mode

<fd-dynamic-page fdCompact>

For instance date picker

If we using ContentDensityDirective at that components we have next result

Is it problem form ngx side or I again missing something. As mentioned before examples form stackblitz (https://sap.github.io/fundamental-ngx/#/core/content-density) isn't working to check how it implemented .

[N1XUS]

Hello @Tomashow. Could you generate a stackblitz example with the code you provided? It will simplify debugging a lot.

[Tomashow]

@N1XUS , Hello I figured out the issue, here (https://github.com/SAP/fundamental-ngx/blob/main/libs/docs/core/content-density/examples/content-density-storage-example.module.ts) I found the way how to provide ContentDensityModule for root as it was written in the documentation (https://sap.github.io/fundamental-ngx/#/core/content-density).

Honestly according the documentation for me it for unclear how to provide it in the correct way. And as I mentioned stackblitz examples was not working .

Is it the correct way to provide it? Because I didn't find something related to this problem on docs page.
After I used this code, all issue that I described above was fixed. Maybe if it possible can you share some information about it or all what I need I can found here (https://github.com/SAP/fundamental-ngx/blob/main/libs/docs/core/content-density/examples/content-density-storage-example.module.ts)

>   ContentDensityModule.forRoot({
>             storage: 'localStorage', // can be 'url' or 'memory'
>             storageKey: '__someStorage_name__',
>             defaultGlobalContentDensity: ContentDensityMode.COMPACT
>         })

[N1XUS]

@Tomashow you are correct of using .forRoot method. Also, if you using standalone components with bootstrapApplication, you can use provideContentDensity function

[Tomashow]

@N1XUS If it possible can you give me example of using provideContentDensity function (standalone components with bootstrapApplication)