jQuery UI Widgets › Forums › Angular › Angular 2 and Themes
Tagged: angular 4, angular dropdownlist, bootstrap dropdownlist, javascript dropdownlist, jQuery DropDownList, jqwidgets dropdownlist, jqx-dropdownlist styling, jqxDropDownList, themes, typescript dropdownlist
This topic contains 10 replies, has 8 voices, and was last updated by Martin 6 years, 3 months ago.
-
AuthorAngular 2 and Themes Posts
-
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>
Hello jfabian,
You should set “black” (as a string).
Please, take a look at this example:
[theme]='"black"'
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThat worked, thank you very much.
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 witharctic
and others.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
Hi fredclement91,
As Hristo pointed out, you should also set the “theme” property of the angular component.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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….
***
<jqxButton [theme]=”{{myCustomTheme}}”>
Button
</jqxButton>Hi seenuvasanV,
You must set it with its property. So inside the component code do something like this:
this.myButtonReference.theme(newTheme)
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/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>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,
MartinjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.