jQuery UI Widgets Forums Angular Angular 2 and Themes

This topic contains 10 replies, has 8 voices, and was last updated by  Martin 5 years, 10 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Angular 2 and Themes #90787

    jfabian
    Participant

    How do I set the theme in Angular 2? I’m using webpack and have the css files in the vendor.ts file. The base.css file works but none of the themes seem to work.

    import ‘jqwidgets-framework/jqwidgets/jqx-all’;
    import ‘jqwidgets-framework/jqwidgets/styles/jqx.base.css’;
    import ‘jqwidgets-framework/jqwidgets/styles/jqx.black.css’;

    I’m setting the theme like this:

    <jqxDropDownList [theme]=’black’ [width]=’200′ [height]=’25’ [source]=’source’ [selectedIndex]=’1′></jqxDropDownList>

    • This topic was modified 7 years, 4 months ago by  jfabian.
    Angular 2 and Themes #90794

    Hristo
    Participant

    Hello jfabian,

    You should set “black” (as a string).
    Please, take a look at this example:
    [theme]='"black"'

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Angular 2 and Themes #90858

    jfabian
    Participant

    That worked, thank you very much.

    Angular 2 and Themes #95237

    fredclement91
    Participant

    Hi,

    Nice to hear that it works for you. But it doesn’t for me 🙁

    Can you please tell me where to insert the import ‘jqwidgets-framework/jqwidgets/styles/jqx.black.css’; line ?
    Inspecting the code, I see that the custom classes (black in our case) is added, but my elements are still grey.
    I also tried with arctic and others.

    Angular 2 and Themes #95238

    fredclement91
    Participant

    By the way, I also have a lot errors (warnings) like this :

    
    ./~/jqwidgets-framework/jqwidgets/styles/jqx.black.css
    (Emitted value instead of an instance of Error) autoprefixer: /Users/fredericclement/angular/myproj/node_modules/jqwidgets-framework/jqwidgets/styles/jqx.black.css:132:1: Gradient has outdated direction syntax. New syntax is like <code>to left</code> instead of <code>right</code>.
     @ ./src/app/app.component.ts 21:49-129
     @ ./src/app/app.module.ts
     @ ./src/main.ts
     @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
    
    Angular 2 and Themes #95252

    Peter Stoev
    Keymaster

    Hi fredclement91,

    As Hristo pointed out, you should also set the “theme” property of the angular component.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Angular 2 and Themes #97278

    seenuvasanV
    Participant

    How to set dynamically the theme value?

    I’m asking something like this:

    export class HeaderComponent implements OnInit {
    theme: string = “myCustomTheme”;
    }

    <jqxButton [theme]=”{{theme}}”>
    Button
    </jqxButton>

    Then easily i can change in future….

    Angular 2 and Themes #97281

    seenuvasanV
    Participant

    ***
    <jqxButton [theme]=”{{myCustomTheme}}”>
    Button
    </jqxButton>

    Angular 2 and Themes #97364

    Ivo Zhulev
    Participant

    Hi seenuvasanV,

    You must set it with its property. So inside the component code do something like this:

    this.myButtonReference.theme(newTheme)

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

    Angular 2 and Themes #101084

    msheth
    Participant

    How to display theme and apply css styling to drop down list?
    I have imported this libraries in angular.json file

    “input”:”node_modules/jqwidgets-scripts/jqwidgets/jqx.all”
    },
    {
    “input”:”node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css”
    },
    {
    “input”:”node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.summer.css”
    }

    And intitalize jqx-drop-down in one of html file. Still theme is not been displayed. And if i want to apply css styling to this drop down how it can be done. Please show the necessary code for it.
    <jqxDropDownList #myDropDownList [theme]='”summer”‘
    [width]=”200″ [height]=”50″ (onSelect)=”Select($event)” [source]=”source” [selectedIndex]=”0″ [autoOpen]=”true”>
    </jqxDropDownList>

    Angular 2 and Themes #101156

    Martin
    Participant

    Hello msheth,

    In the angular.json file you should import the css files in the styles array:

    "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
     "styles": [
          "src/styles.css",
          "node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css",
          "node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.summer.css"
      ],
      "scripts": []

    What is this “input” property that you set?

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.