Question T14916
Visible to All Users

Switching between default themes in Angular

created a year ago

Hi All,

I'm trying to apply one of the default themes in my Angular 13.2.0 Web App using the following surveyjs library version:

Code
"survey-angular-ui": "^1.9.110", "survey-core": "^1.9.110", "survey-pdf": "^1.9.110",

from the documentation I read that it is enough to set these imports in the component that hosts the library instance but it seems that it is not enough:

Code
import { Model } from 'survey-core'; import "survey-core/themes/doubleborder-light"; // { DoubleBorderLight }

This is my styles part of the angular.json file:

Code
"styles": [ { "input": "src/custom-theme.scss" }, "src/styles.css", "node_modules/survey-core/defaultV2.min.css" ],

Simply the library continue to use the default standard theme, whatever I try to set in the import. I also tried in Incognito Window to check if it was a cache problem but nothing.

Many thanks in advance for your help.

Paolo

Answers approved by surveyjs Support

created a year ago

Hello Paolo,
To apply one of a predefined themes in Angular, import a survey Angular component and import a defaultV2 and a required theme module after the Survey model import, and call survey.applyTheme

JavaScript
import "survey-core/defaultV2.min.css"; import Theme from "survey-core/themes/borderless-dark.js"; survey.applyTheme(Theme);

Please refer to the following demo: View CodeSandbox

Should you have any further questions, please let us know.

P.S. We'll validate documentation instructions. Thank you

    Show previous comments (1)

      Hello Paolo,
      I attached a demo for your reference. Please test it on your side. Pay special attention to the app.component.ts and angular.json files where I register form library styles and initialize a survey. Please let me know if it helps. Otherwise, I'll assist you further.

        Dear Jane,

        sorry for the late reply. Many thanks for the example.

        In the end I had only to add this just before the theme import:

        Code
        //@ts-ignore import DoubleBorderLight from "survey-core/themes/doubleborder-light.js";

        Because otherwise I always got this error: "Could not find a declaration file for module 'survey-core/themes/flat-light.js'."

        Best Regards,
        Paolo

          Hello Paolo,
          Thank you for the update. I'm happy to hear that you managed to achieve the goal. Please let us know if you have any further questions.