How to import enum types in Angular?

[steffenlutter-sap]

Issue Description

From the documentation it is not clear to me how to import enums - while I got help on Slack to get this working on my local dev environment, I am wondering if this is the way it should be done:

import FCLLayout from "@ui5/webcomponents-fiori/dist/types/FCLLayout.js";

Should enum types be re-exported by the angular wrapper? Or maybe should the documentation be improved?

Speaking of which - which one is the official documentation for the Angular Wrapper? I can find https://sap.github.io/ui5-webcomponents/docs/frameworks/Angular/ which seems to be a one-pager and https://ui5-webcomponents-ngx.netlify.app - but not sure if the latter is official. For react I can find something more official looking (https://sap.github.io/ui5-webcomponents-react/v2/) but I don't find any equivalent for Angular.

Maybe you can guide me here?

Many thanks in advance.

Issue Type

• Documentation is unclear
• Documentation is incorrect
• Documentation is missing
• Other

[github-actions]

Hello @steffenlutter-sap, thank you for using ui5-webcomponents-ngx! The ui5-webcomponents-ngx team will triage your issue as soon as possible.

[droshev]

@steffenlutter-sap the documentation you can find on https://ui5-webcomponents-ngx.netlify.app/

[stfnlutter]

Hello @droshev, thanks for your response. Unless I am missing something, nothing there responds to my question about how to import enum types - I still need to import FCLLayout like so:

import FCLLayout from "@ui5/webcomponents-fiori/dist/types/FCLLayout.js";

The documentation seems to be outdated (speaking of Angular 16) and I am still wondering why this is hosted on some external third-party (netlify.app) contrary to the equivalent documentation for the react wrapper which is on sap.github.io? For me this raises concerns of how well this library is supported...

[droshev]

Can you share more about your use case with enums for FCLLayout?
The API atm reflects the latest API from ui5 webcomponents. Regarding the deployment on netlify(it is quite easy, convenient, flexible. It allows even deploying multiple version documentation) there is nothing that missing regarding the API. We can just clone it on ghpages too, but it won't bring any differences (fyi:we will do this very soon)

[stfnlutter]

Hello @droshev, sure, we use it generally as follows:

In the html template we bind the layout attribute on a variable like so:

<ui5-flexible-column-layout [layout]="currentLayout">
[...]
</ui5-flexible-column-layout>

In the component code we initialize the variable and then modify it based on the user actions:

[...]
  currentLayout: FCLLayout = FCLLayout.OneColumn;

[...]

  handleServicePress(event: any) {
    this.currentLayout = FCLLayout.TwoColumnsMidExpanded;
    this.selectedServiceName = event.item.id;
    this.loadServiceDetails();
  }

  handleServiceRefreshPress() {
    this.currentLayout = FCLLayout.OneColumn;
    this.loadServicesHealth();
  }

  handleInstancesRefreshPress() {
    this.currentLayout = FCLLayout.TwoColumnsMidExpanded;
    this.loadServiceDetails();
  }

  handleInstancesMaximizeMinimizePress() {
    if (this.currentLayout === FCLLayout.MidColumnFullScreen) {
      this.currentLayout = FCLLayout.TwoColumnsMidExpanded;
    } else {
      this.currentLayout = FCLLayout.MidColumnFullScreen;
    }
  }

  handleInstancesClosePress() {
    this.currentLayout = FCLLayout.OneColumn;
  }

  handleInstancePress(event: any) {
    this.currentLayout = FCLLayout.ThreeColumnsEndExpanded;
    this.selectedInstanceId = event.item.id;
    this.loadInstanceDetails();
  }

  handleInstanceDetailMaximizeMinimizePress() {
    if (this.currentLayout === FCLLayout.ThreeColumnsEndExpanded) {
      this.currentLayout = FCLLayout.EndColumnFullScreen;
    } else {
      this.currentLayout = FCLLayout.ThreeColumnsEndExpanded;
    }
  }

  handleInstanceDetailClosePress() {
    this.currentLayout = FCLLayout.TwoColumnsMidExpanded;
  }

[...]

TypeScript likes to have the enum type, hence we import it. I think this is fine, I was just wondering it the way we import it with import FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js'; is recommended or if it shouldn't be available with the import import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';.

Thanks for your help, much appreciated.